国际化 (i18n)
了解如何通过多方向支持 (LTR/RTL) 来国际化您的 Nuxt 应用。
使用方法
语言环境
使用 locale prop，并传入您想使用的来自 @nuxt/ui/locale 的语言环境。
app.vue
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>
<template>
<UApp :locale="fr">
<NuxtPage />
</UApp>
</template>
使用 locale prop，并传入您想使用的来自 @nuxt/ui-pro/locale 的语言环境。
app.vue
<script setup lang="ts">
import { fr } from '@nuxt/ui-pro/locale'
</script>
<template>
<UApp :locale="fr">
<NuxtPage />
</UApp>
</template>
自定义语言环境
您也可以选择使用 defineLocale 添加您自己的语言环境。
app.vue
<script setup lang="ts">
import type { Messages } from '@nuxt/ui'
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
})
</script>
<template>
<UApp :locale="locale">
<NuxtPage />
</UApp>
</template>
app.vue
<script setup lang="ts">
import type { Messages } from '@nuxt/ui-pro'
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
})
</script>
<template>
<UApp :locale="locale">
<NuxtPage />
</UApp>
</template>
查看
code 参数，您需要在其中传入语言的 ISO 代码。示例：hi印地语 (语言)de-AT：德语 (语言)，在奥地利 (地区) 使用
动态语言环境
要 Doyle 语言之间动态切换，您可以使用Nuxt I18n模块。
安装 Nuxt I18n 包
pnpm add @nuxtjs/i18n
yarn add @nuxtjs/i18n
npm install @nuxtjs/i18n
bun add @nuxtjs/i18n
在您的 nuxt.config.ts 中添加 Nuxt I18n 模块
nuxt.config.ts
export default defineNuxtConfig({
modules: [
'@nuxt/ui',
'@nuxtjs/i18n'
],
css: ['~/assets/css/main.css'],
i18n: {
locales: [{
code: 'de',
name: 'Deutsch'
}, {
code: 'en',
name: 'English'
}, {
code: 'fr',
name: 'Français'
}]
}
})
使用 useI18n 设置 locale prop
app.vue
<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
</script>
<template>
<UApp :locale="locales[locale]">
<NuxtPage />
</UApp>
</template>
app.vue
<script setup lang="ts">
import * as locales from '@nuxt/ui-pro/locale'
const { locale } = useI18n()
</script>
<template>
<UApp :locale="locales[locale]">
<NuxtPage />
</UApp>
</template>
动态方向
每个语言环境都有一个 dir 属性，该属性将由 App 组件用于设置所有组件的方向性。
在多语言应用中，您可能希望根据用户的语言环境动态设置 lang 和 dir 属性在 <html> 元素上，您可以使用useHeadcomposable 函数
app.vue
<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)
useHead({
htmlAttrs: {
lang,
dir
}
})
</script>
<template>
<UApp :locale="locales[locale]">
<NuxtPage />
</UApp>
</template>
app.vue
<script setup lang="ts">
import * as locales from '@nuxt/ui-pro/locale'
const { locale } = useI18n()
const lang = computed(() => locales[locale.value].code)
const dir = computed(() => locales[locale.value].dir)
useHead({
htmlAttrs: {
lang,
dir
}
})
</script>
<template>
<UApp :locale="locales[locale]">
<NuxtPage />
</UApp>
</template>
支持的语言
默认情况下，使用 en 语言环境。
🇸🇦
阿拉伯语
代码:
ar🇦🇿
阿塞拜疆语
代码:
az🇧🇬
保加利亚语
代码:
bg🇧🇩
孟加拉语
代码:
bn🇪🇸
加泰罗尼亚语
代码:
ca🇮🇶
库尔德语
代码:
ckb🇨🇿
捷克语
代码:
cs🇩🇰
丹麦语
代码:
da🇩🇪
德语
代码:
de🇬🇷
希腊语
代码:
el🇬🇧
英语
代码:
en🇪🇸
西班牙语
代码:
es🇪🇪
爱沙尼亚语
代码:
et🇮🇷
波斯语
代码:
fa-IR🇫🇮
芬兰语
代码:
fi🇫🇷
法语
代码:
fr🇮🇱
希伯来语
代码:
he🇮🇳
印地语
代码:
hi🇭🇺
匈牙利语
代码:
hu🇦🇲
亚美尼亚语
代码:
hy🇮🇩
印度尼西亚语
代码:
id🇮🇹
意大利语
代码:
it🇯🇵
日语
代码:
ja🇰🇿
哈萨克语
代码:
kk🇰🇭
高棉语
代码:
km🇰🇷
韩语
代码:
ko🇳🇴
挪威语 (博克马尔语)
代码:
nb-NO🇳🇱
荷兰语
代码:
nl🇵🇱
波兰语
代码:
pl🇵🇹
葡萄牙语
代码:
pt🇧🇷
葡萄牙语 (巴西)
代码:
pt-BR🇷🇴
罗马尼亚语
代码:
ro🇷🇺
俄语
代码:
ru🇸🇰
斯洛伐克语
代码:
sk🇸🇪
瑞典语
代码:
sv🇹🇭
泰语
代码:
th🇹🇯
塔吉克语
代码:
tj🇹🇷
土耳其语
代码:
tr🇨🇳
维吾尔语
代码:
ug-CN🇺🇦
乌克兰语
代码:
uk🇵🇰
乌尔都语
代码:
ur🇺🇿
乌兹别克语
代码:
uz🇻🇳
越南语
代码:
vi🇨🇳
简体中文
代码:
zh-CN🇹🇼
繁体中文
代码:
zh-TW您可以使用
nuxt-ui CLI 来创建新的语言环境nuxt-ui make locale --code "en" --name "English"