Nuxt3集成Vuetify3时v-stepper组件无法解析报错排查

你当前安装的vuetify@3.0.0-beta.5版本中，<v-stepper>相关组件属于实验室（Labs）测试组件，未纳入正式组件包的导出列表。你在插件中只全量导入了vuetify/components下的正式稳定组件，没有包含stepper组件，因此Vue无法解析该标签，抛出组件找不到的警告。

• 修改plugins/vuetify.js插件代码，补充导入并注册stepper组件。你可以选择全量导入Labs模块的所有测试组件，写法更简单：

// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
// 导入Labs模块下的所有测试组件
import * as labsComponents from 'vuetify/labs/components'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components: {
      ...components,
      ...labsComponents
    },
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

如果在意产物体积，也可以只单独导入stepper系列组件：

// plugins/vuetify.js
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'
// 单独导入stepper相关组件
import {
  VStepper,
  VStepperHeader,
  VStepperStep,
  VStepperItems,
  VStepperContent
} from 'vuetify/labs/VStepper'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    components: {
      ...components,
      VStepper,
      VStepperHeader,
      VStepperStep,
      VStepperItems,
      VStepperContent
    },
    directives,
  })

  nuxtApp.vueApp.use(vuetify)
})

• 如果执行第一步后出现组件样式丢失问题，在nuxt.config.ts的css配置中补充Labs组件样式路径即可。

注：你当前使用的Nuxt3为rc.4预览版、Vuetify3为beta.5测试版，早期测试版本的Labs组件导入路径、API可能存在变动，如果上述操作不生效，可以将两个依赖升级到对应正式版本后再试。

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