如何在Nuxt3/Vue3项目中同时引入Vuetify3组件与实验室组件？

环境 #

• Nuxt: 3.6.5
• Vuetify: 3.3.9

package.json #

{
  "name": "nuxt-app",
  "private": true,
  "scripts": {
    "build": "nuxt build",
    "dev": "nuxt dev",
    "generate": "nuxt generate",
    "preview": "nuxt preview",
    "postinstall": "nuxt prepare"
  },
  "devDependencies": {
    "@iconify/vue": "^4.1.1",
    "@nuxt/devtools": "latest",
    "@types/node": "^18",
    "nuxt": "^3.6.5"
  },
  "dependencies": {
    "@mdi/font": "^7.2.96",
    "mdi": "^2.2.43",
    "mitt": "^3.0.1",
    "sass": "^1.63.6",
    "vuetify": "^3.3.9"
  }
}

我知道可以在使用v-data-table、v-data-table-server等实验室组件的页面里直接导入：

import { VDataTable, VDataTableServer } from 'vuetify/labs/VDataTable'

但不想在每个用到实验室组件的页面重复写这段代码，所以尝试在plugins/vuetify.ts里全局配置，调整后的文件内容如下：

调整后的plugins/vuetify.ts #

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import * as labsComponents from 'vuetify/labs/components'
  
import '@mdi/font/css/materialdesignicons.css'
import {aliases, mdi} from "vuetify/iconsets/mdi";

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        ssr: true,
        components: {
            components,
            labsComponents
        },
        directives,
    
        icons: {
            defaultSet: 'mdi',
            aliases,
            sets: {
                mdi
            }
        }
    })
    
    nuxtApp.vueApp.use(vuetify)
})

启动项目后出现一堆组件解析失败的警告：

[Vue warn]: Failed to resolve component: v-window                                                                                                       8:02:18 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: v-window-item                                                                                                  8:02:18 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: v-app                                                                                                          8:02:18 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: v-system-bar                                                                                                   8:02:18 AM
If this is a native custom element, make sure to exclude it from component resolution via compilerOptions.isCustomElement.
[Vue warn]: Failed to resolve component: v-app-bar    
.....
.....          

正确配置方案 #

问题出在组件注册的写法上，当前把components和labsComponents作为对象属性传入，导致Vuetify基础组件没有被正确展开注册。正确做法是用对象展开运算符，将两类组件合并为一个对象：

修改plugins/vuetify.ts中的components配置部分：

components: {
  ...components,
  ...labsComponents
},

完整正确配置代码：

import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
import * as labsComponents from 'vuetify/labs/components'
  
import '@mdi/font/css/materialdesignicons.css'
import { aliases, mdi } from "vuetify/iconsets/mdi";

export default defineNuxtPlugin(nuxtApp => {
    const vuetify = createVuetify({
        ssr: true,
        components: {
            ...components,
            ...labsComponents
        },
        directives,
    
        icons: {
            defaultSet: 'mdi',
            aliases,
            sets: {
                mdi
            }
        }
    })
    
    nuxtApp.vueApp.use(vuetify)
})

修改后，Vuetify基础组件和实验室组件都会被正确全局注册，组件解析失败的警告会消失。

内容的提问来源于stack exchange，提问作者wureka