Nuxt3 Intlify i18n点击切换语言报错：必须在setup函数顶部调用

问题原因 #

useI18n 是Vue的组合式API函数，必须在<script setup>的顶层作用域调用，不能放到嵌套函数（比如点击事件处理函数changeLanguage）里面执行，这是组合式API的调用规则，违反就会触发这个语法错误。

修复方案 #

在<script setup>的最外层先获取i18n实例，再在事件函数里直接用这个实例修改语言：

修改languageSwitch.vue代码：

<script setup>
import { useI18n } from 'vue-i18n';

// 顶层调用useI18n拿到locale对象
const { locale } = useI18n()

const changeLanguage = (lang) => {
  // 直接修改locale的值即可切换语言
  locale.value = lang
}
</script>

额外说明 #

你的nuxt.config.js配置没问题，不用调整。记住所有useXXX开头的组合式API函数，都得在setup的顶层调用，不能放在回调、if判断这类嵌套逻辑里。

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