how to work with vue plugin in nuxt project

Question

I want to use tailwind typeahead vue plugin in nuxt. i have added the package using npm install vue-tailwindcss-typeahead .

then i created a file in plugins folder. tailwind-typeahead.js with following code

import Vue from 'vue'
import VueTailwindcssTypeahead from 'vue-tailwindcsscss-typeahead'

Vue.use(VueTailwindcssTypeahead)

and included the plugin file in nuxt.config.js

{ src: './plugins/tailwind-typeahead.js' }

But i am getting this error

   This dependency was not found:                                                                                   friendly-errors 01:44:37
                                                                                                                 friendly-errors 01:44:37
* vue-tailwindcsscss-typeahead in ./plugins/tailwind-typeahead.js                                              friendly-errors 01:44:37
                                                                                                                 friendly-errors 01:44:37
To install it, you can run: npm install --save vue-tailwindcsscss-typeahead

for reference here is the link of package

https://github.com/basarozcan/vue-tailwindcss-typeahead

have you try to make it as a client side only plugin? { src: '~/plugins/tailwind-typeahead.js', ssr: false }, — DengSihan
Yes i tried this now and there is same issue, its not working — GRV
please check the package is installed successfully, and also check the path to your tailwind-typeahead.js — DengSihan
i can see the package in package.json file as well tailwind-typeahead.js is in plugins folder. — GRV

kissu kissu · Accepted Answer · 2021-06-21T06:21:04

You do have a typo in your plugin: vue-tailwindcsscss-typeahead.

You probably meant to write vue-tailwindcss-typeahead .

The rest is fine and it's the way to go if you want your code to be globally available in your Nuxt app. If you only want it local, import it in the component itself.

how to work with vue plugin in nuxt project

1 Answers