Nuxt组合式函数中$t全局国际化函数无法使用的问题

为什么$t在组合式函数中不可用？ #

• $t是Nuxt i18n注入到Vue组件实例中的全局属性，仅在组件模板、组件的setup函数（或<script setup>）上下文内可直接访问。
• 独立抽离的组合式函数不属于组件上下文的一部分，无法直接获取组件实例的$t，因此会报“未定义”错误。
• 你开启的autoImportTranslationFunctions实验特性，仅针对模板或组件内部的翻译函数自动导入做优化，不会扩展到独立组合式函数中注入$t。

如何让$t在组合式函数中工作？ #

方式1：官方推荐——使用useI18n()（最稳妥） #

这是Nuxt i18n为组合式API场景提供的标准用法，能确保正确关联当前国际化上下文：

// 你的组合式函数
export const useMyComposable = () => {
  const { t } = useI18n()
  const translatedText = t('key')
  return { translatedText }
}

方式2：通过useNuxtApp()手动获取$t #

如果习惯$t的写法，可通过Nuxt全局上下文获取注入的$t：

// 你的组合式函数
export const useMyComposable = () => {
  const { $t } = useNuxtApp()
  const translatedText = $t('key')
  return { translatedText }
}

不过这种方式和useI18n()本质类似，而useI18n()还能提供切换语言、当前语言状态等更多i18n相关能力，更推荐前者。

方式3：手动传递$t（不推荐） #

在组件中调用组合式函数时，把组件实例的$t传进去：

// 组件内调用组合式函数
const { translatedText } = useMyComposable($t)

// 组合式函数定义
export const useMyComposable = ($t) => {
  const translatedText = $t('key')
  return { translatedText }
}

这种方式会让组合式函数和组件强耦合，失去复用性，不建议使用。

内容的提问来源于stack exchange，提问作者Павел Хорольський