当前位置:   article > 正文

nuxt3 i18n_definenuxtroutemiddleware

definenuxtroutemiddleware

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)
})
})

声明:本文内容由网友自发贡献,不代表【wpsshop博客】立场,版权归原作者所有,本站不承担相应法律责任。如您发现有侵权的内容,请联系我们。转载请注明出处:https://www.wpsshop.cn/w/正经夜光杯/article/detail/814257
推荐阅读
  

闽ICP备14008679号