import single Vuetify component in Nuxt.js?

user_14753968 0
Viewed 1742

I use Vuetify in nuxt.js. How to use this only in dashboard layout? in nuxt.config.js

 modules: [
        //['nuxt-leaflet', { /* module options */}],
        'bootstrap-vue/nuxt',
        '@nuxtjs/axios',
        '@nuxtjs/pwa',
        '@nuxtjs/auth',
        '@nuxtjs/toast',
        ['@nuxtjs/vuetify', {rtl: true}],
        // 'nuxt-i18n',
    ],
nuxt.js vuetify.js vue.js javascript
2 Answers

Are you using vuetify-loader with tree-shaking? If so, you can just import specific vuetify component into specific .vue component:

import { VTextField } from 'vuetify/lib';

and add:

components: { VTextField }

According to the @nuxtjs/vuetify module documentation, if you using the treeShake option, by default your Nuxt.js app will use only the needed vuetify component, and the bundle size didn't increase.

Uses vuetify-loader to enable automatic tree-shaking. Enabled only for production by default.

Another thing, If you are using Nuxt >= 2.9.0, use buildModules section instead:

{
  buildModules: [
    // Simple usage
    '@nuxtjs/vuetify',

    // With options
    ['@nuxtjs/vuetify', { /* module options */ }]
  ]
}
user_43660650

If you are using NuxtJS Vuetify Module (It seems that you are), I assume that your package.json does not have vuetify listed there, because it is the @nuxtjs/vuetify that imports it. Thus, you can't import it using only the module name. I suggest you to import it with it's complete path like the following:

import { VCard } from '~/node_modules/vuetify/lib';

Then register the component, of course.

user_46725340
Related