如何在Wails项目中配置Vuetify 3以修复"Could not find defaults instance"错误？

问题重现 #

• 创建Wails项目：

wails init -n myproject -t vue-ts
cd myproject

• 安装Vuetify：

npm install vuetify@^3.1.5 --save

• 修改frontend/src/main.ts配置Vuetify：
  原内容：

import {createApp} from 'vue'
import App from './App.vue'

createApp(App).mount('#app')

替换为：

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
    components,
    directives,
})

createApp(App).use(vuetify).mount('#app')

• 在frontend/src/components/HelloWorld.vue添加<v-btn>FOO</v-btn>后，控制台出现核心错误：

[Vue warn]: inject() can only be used inside setup() or functional components.
Uncaught Error: [Vuetify] Could not find defaults instance

解决方法 #

1. 修正main.ts的Vuetify注入逻辑 #

错误根源是Vue应用实例链式调用时，Vuetify的上下文未完全注入。修改为分步创建应用实例的写法，同时显式配置默认值：

import { createApp } from 'vue'
import App from './App.vue'

// Vuetify
import 'vuetify/styles'
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

const vuetify = createVuetify({
  components,
  directives,
  // 显式定义全局默认配置，确保Defaults实例存在
  defaults: {
    VBtn: {
      variant: 'elevated'
    }
  }
})

// 分步创建应用，避免链式调用导致的上下文丢失
const app = createApp(App)
app.use(vuetify)
app.mount('#app')

2. 确保组件使用<script setup>语法 #

Wails的vue-ts模板默认采用<script setup>，需保证HelloWorld.vue符合该规范，示例：

<template>
  <div class="hello">
    <v-btn>FOO</v-btn>
  </div>
</template>

<script setup lang="ts">
// 组件逻辑写在这里，自动处于setup上下文
</script>

<style scoped>
.hello {
  padding: 2rem;
}
</style>

3. 重启开发环境 #

清理依赖并重新启动项目，确保配置生效：

rm -rf node_modules package-lock.json
npm install
wails dev

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