nuxt3 i18n

import { createI18n } from ‘vue-i18n’
import { defineNuxtPlugin } from ‘#app’
import zh from ‘…/lang/zh’
import en from ‘…/lang/en’

const message = {
zh,
en
}
const i18n = createI18n({
legacy: false,
globalInjection: true,
locale: ‘en’,
warnHtmlMessage: false,
messages: message
})

export default defineNuxtPlugin(nuxtApp => {
nuxtApp.vueApp.use(i18n)
})

// zh.js
export default {
home: {}，
menu：{
‘/’: ‘Home’,
}
}

// css
:deep(.el-tooltip__trigger:focus-visible) {
outline: unset;
}
// <template
<el-dropdown v-if=“langText” @command=“toggleLang”
<div {{ langText }}</div
<template #dropdown
<el-dropdown-menu
<el-dropdown-item command=“zh” 简体中文</el-dropdown-item
<el-dropdown-item command=“en” English</el-dropdown-item
</el-dropdown-menu
</template
</el-dropdown
// script
import { useI18n } from ‘vue-i18n’
const { locale, t } = useI18n()

let lang = ref(‘’)
function toggleLang(val) {
lang.value = val === ‘en’ ? ‘en’ : ‘zh’
}
onMounted(() => {
const { locale } = useI18n()
lang = locale
toggleLang(lang.value)
})

// path
watch(() => locale.value, () => {
navList.value.forEach(item => {
item.title = t(‘menu.’ + item.path)
})
})