nuxt 生成的 static 站点上未加载 Vue 插件

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>

Answer 1

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)

Answer 2

I've got the same problem and that could be fixed by setting ssr: false in the nuxt.config.js

export default {
    ssr: false,
    target: 'static'
}