Vue plugin not loaded on static site generated by nuxt

Question

In my nuxt.js project I am using a component from a Vue library called vue-tailwind.

I import the library as a plugin in this way (as advised by the author):

/plugins/vue-tailwind.js

import Vue from 'vue'
import VueTailwind from 'vue-tailwind'
Vue.use(VueTailwind)

/nuxt.config.js

  plugins: ['~plugins/vue-tailwind']

and the component works perfectly in development.

My problem is that the component is not rendered when I serve the app generated with

nuxt generate

I already tried to load the plugin this way:

    { src: '~plugins/vue-tailwind', mode:  'client' }

and also tried to put the component between client-only tag

<client-only>
            <t-datepicker
              v-model="date"
              :max-date="today"
              placeholder="Select a date"
              date-format="Y-m-d"
              user-format="d-M-Y"
            />
</client-only>

fparaggio fparaggio · Accepted Answer · 2021-01-18T20:27:25

After several attempt, I understood that the component has to be registered in the plugin. Vue.use does not work in generated code.

My final working code is the following:

/plugins/vue-tailwind.js

import Vue from 'vue'
import { TDatepicker } from 'vue-tailwind/dist/components';
Vue.component('t-datepicker', TDatepicker)

Vue plugin not loaded on static site generated by nuxt

1 Answers