运行时切换Vuetify语言失败：useLocale报注入实例未找到错误

尝试切换Vuetify语言时触发错误，按照官方国际化指南配置locale后，调用useLocale()函数抛出如下错误：

Error: [Vuetify] Could not find injected locale instance

在测试环境中使用以下代码也会复现该问题：

<template>
  <v-app>
    <v-container>
      <v-btn text="切换语言" @click="switchLanguage" />
    </v-container>
  </v-app>
</template>

<script setup>
  import { useLocale } from 'vuetify'

  function switchLanguage() {
    const locale = useLocale()
    locale.current.value = locale.current.value === 'en' ? 'tr' : 'en'
  }
</script>

问题原因及修复方案 #

1. 未启用Vuetify国际化模块 #

需要在Vuetify初始化配置中明确启用locale模块，并注册需要使用的语言包。

2. useLocale()调用时机错误 #

useLocale()是Vue组合式API函数，必须在组件的<script setup>顶层或其他组合式函数的顶层调用，不能在点击事件的回调函数内部调用。

3. 未注册目标语言 #

如果要切换到非默认语言（比如示例中的土耳其语tr），需要提前导入并注册对应的语言包。

修正后的完整代码示例 #

Vuetify配置文件（如plugins/vuetify.js）

import { createVuetify } from 'vuetify'
import { en, tr } from 'vuetify/locale'

export default createVuetify({
  locale: {
    locale: 'en',
    fallback: 'en',
    messages: { en, tr }
  }
})

组件代码

<template>
  <v-app>
    <v-container>
      <v-btn text="切换语言" @click="switchLanguage" />
    </v-container>
  </v-app>
</template>

<script setup>
import { useLocale } from 'vuetify'

// 在顶层调用useLocale获取实例
const locale = useLocale()

function switchLanguage() {
  locale.current.value = locale.current.value === 'en' ? 'tr' : 'en'
}
</script>

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