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

Question

我在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',
],

Answer 1

您是否使用带有树抖动的vuetify加载程序？如果是这样，您可以将特定的vuetify组件导入特定的.vue组件：

import { VTextField } from 'vuetify/lib';

并添加：

components: { VTextField }

根据@nuxtjs/vuetify模块文档，如果您使用treeShake选项，默认情况下，您的Nuxt.js应用程序将只使用所需的vuetify组件，并且捆绑包大小没有增加。

使用vuetify加载程序启用自动树抖动。默认情况下仅为生产启用。

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

{
buildModules: [
// Simple usage
'@nuxtjs/vuetify',
// With options
['@nuxtjs/vuetify', { /* module options */ }]
]
}

Answer 2

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

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

然后注册组件。