如何在Nuxt3中定义Vuetify3虚拟组件并规避Unexpected token错误

问题根源 #

你在nuxt.config.ts中直接导入VBtn组件类时，Node.js会尝试执行组件文件（VBtn.mjs）中的代码，而该文件里导入了.css样式文件——Node.js原生无法解析CSS语法（比如.v-btn选择器），因此抛出Unexpected token '.'错误。

解决方案 #

不能在Node环境运行的配置文件（nuxt.config.ts）中直接导入Vuetify组件，需要通过Nuxt插件来配置虚拟组件，插件运行在Vue的应用环境中，能够正确处理组件的样式导入。

步骤1：创建Vuetify配置插件 #

在项目根目录的plugins文件夹下新建vuetify-custom.ts：

import { createVuetify } from 'vuetify'
import { VBtn } from 'vuetify/components/VBtn'

export default defineNuxtPlugin(nuxtApp => {
  const vuetify = createVuetify({
    aliases: {
      VBtnPrimary: VBtn,
    },
    defaults: {
      VBtnPrimary: {
        class: 'cta px-12',
        variant: 'flat',
        size: 'x-large',
        rounded: '0',
      },
    },
  })

  nuxtApp.vueApp.use(vuetify)
})

步骤2：调整nuxt.config.ts配置 #

移除原配置中直接导入的VBtn，并修改Vuetify模块的配置，避免重复初始化：

export default defineNuxtConfig({
  typescript: {
    includeWorkspace: true,
  },
  modules: [
    '@nuxtjs/eslint-module',
    '@invictus.codes/nuxt-vuetify',
  ],
  vuetify: {
    moduleOptions: {
      treeshaking: true,
      useIconCDN: true,
      styles: 'sass',
      autoImport: true,
      // 禁用模块自动创建Vuetify实例，改用自定义插件
      autoCreate: false,
    },
  },
})

步骤3：验证虚拟组件使用 #

在任意Vue组件中直接使用VBtnPrimary即可：

<template>
  <VBtnPrimary>自定义按钮</VBtnPrimary>
</template>

为什么之前用字符串'VBtn'无效？ #

当你在nuxt.config.ts的aliases中写VBtnPrimary: 'VBtn'时，Node环境无法正确解析组件的注册逻辑，导致Vue找不到对应的渲染函数。而在插件中直接导入组件类并配置别名，Vuetify能正确关联组件的实现和配置。

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