在 Nuxt.js 中导入单个 Vuetify 组件？答案

【问题标题】：import single Vuetify component in Nuxt.js?在 Nuxt.js 中导入单个 Vuetify 组件？
【发布时间】：2021-03-17 03:32:20
【问题描述】：

我在 nuxt.js 中使用 Vuetify。如何仅在仪表板布局中使用它？在 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',
    ],

【问题讨论】：

标签： javascript vue.js nuxt.js vuetify.js

【解决方案1】：

您是否将vuetify-loader 与tree-shaking 一起使用？如果是这样，您可以将特定的 vuetify 组件导入特定的 .vue 组件：

import { VTextField } from 'vuetify/lib';

并添加：

components: { VTextField }

根据@nuxtjs/vuetify 模块文档，如果您使用treeShake option，默认情况下，您的 Nuxt.js 应用将仅使用所需的 vuetify 组件，并且包大小不会增加。

使用vuetify-loader 启用自动tree-shaking。默认情况下仅对生产启用。

另一件事，如果您使用的是Nuxt >= 2.9.0，请改用 buildModules 部分：

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

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

【讨论】：

好的。但风格会改变。 vuetify/style/src/_reset.scss 。和引导冲突
请尝试从 'vuetify/lib' 导入 {VTextField} 并添加组件：{ VTextField }

【解决方案2】：

如果您使用的是NuxtJS Vuetify Module（您似乎是），我假设您的package.json 没有列出vuetify，因为导入它的是@nuxtjs/vuetify。因此，您不能仅使用模块名称来导入它。我建议你用它的完整路径导入它，如下所示：

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

然后注册组件，当然。

【讨论】：