使用版本
{
"name": "nuxt-app",
"private": true,
"type": "module",
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare"
},
"devDependencies": {
"@nuxt/devtools": "latest",
"@nuxtjs/i18n": "^8.0.0-rc.5",
"nuxt": "^3.7.4",
"sass": "^1.69.0",
"vite-plugin-vuetify": "^1.0.2",
"vue": "^3.3.4",
"vue-router": "^4.2.5",
"vuetify": "^3.3.20"
},
"dependencies": {
"@mdi/font": "^7.3.67",
"@pinia/nuxt": "^0.4.11"
}
}
$t
$t可以进行基础的变量翻译
<template>
<div class="app">
<div class="title">
{{ $t("login") }}
{{ $t("logout") }}
</div>
</div>
</template>
<script setup>
</script>
$tm
$tm 进行对象或数组类型的翻译,同时需要配合 $rt 进行操作
contents是配置在language中的语言包
export default {
language: [
{
name: '简体中文',
code: 'zh',
},
{
name: '英语',
code: 'en',
}
],
login: '登录',
logout: '退出',
}
<div class="container">
<template v-for="content in tm('contents')">
<h2>{{ rt(content.title) }}</h2>
<p v-for="paragraph in content.paragraphs">
{{ rt(paragraph) }}
</p>
</template>
</div>
<script setup>
import { defineComponent } from 'vue
//import { useI18n } from 'vue-i18n'
import {useI18n} from "#imports"
const {locale, locales} = useI18n();
</script>