国际化 (i18n)
Nuxt UI 支持 50 多个地区和多方向 (LTR/RTL) 的国际化。
用法
地区
使用 locale 属性，并指定你希望使用的地区，来自 @nuxt/ui/locale
App.vue
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>
<template>
<UApp :locale="fr">
<RouterView />
</UApp>
</template>
自定义地区
你可以使用 defineLocale composable 来创建你自己的地区。
App.vue
<script setup lang="ts">
import type { Messages } from '@nuxt/ui'
import { defineLocale } from '@nuxt/ui/composables/defineLocale.js'
const locale = defineLocale<Messages>({
name: 'My custom locale',
code: 'en',
dir: 'ltr',
messages: {
// implement pairs
}
})
</script>
<template>
<UApp :locale="locale">
<RouterView />
</UApp>
</template>
查看
code 参数，在这里你需要传入语言的 ISO 代码。例如：hi印地语 (语言)de-AT: 德语 (语言)，在奥地利 (地区) 使用
扩展地区
你可以通过覆盖 messages 或 code 来自定义现有地区，使用 extendLocale composable。
App.vue
<script setup lang="ts">
import { en } from '@nuxt/ui/locale'
import { extendLocale } from '@nuxt/ui/composables/defineLocale.js'
const locale = extendLocale(en, {
code: 'en-GB',
messages: {
commandPalette: {
placeholder: 'Search a component...'
}
}
})
</script>
<template>
<UApp :locale="locale">
<RouterView />
</UApp>
</template>
动态区域设置
要动态切换语言，你可以使用Vue I18n插件。
安装 Vue I18n 包
pnpm add vue-i18n@11
yarn add vue-i18n@11
npm install vue-i18n@11
bun add vue-i18n@11
在你的 main.ts 中使用 Vue I18n 插件。
main.ts
import { createApp } from 'vue'
import { createRouter, createWebHistory } from 'vue-router'
import { createI18n } from 'vue-i18n'
import ui from '@nuxt/ui/vue-plugin'
import App from './App.vue'
const app = createApp(App)
const router = createRouter({
routes: [],
history: createWebHistory()
})
const i18n = createI18n({
legacy: false,
locale: 'en',
availableLocales: ['en', 'de'],
messages: {
en: {
// ...
},
de: {
// ...
}
}
})
app.use(router)
app.use(i18n)
app.use(ui)
app.mount('#app')
使用 useI18n 设置 locale 属性。
App.vue
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
</script>
<template>
<UApp :locale="locales[locale]">
<RouterView />
</UApp>
</template>
动态方向
每个地区都有一个 dir 属性，App 组件将使用它来设置所有组件的方向性。
在一个多语言应用程序中，你可能希望根据用户的地区动态设置 <html> 元素的 lang 和 dir 属性，你可以使用useHeadcomposable 来实现。
App.vue
<script setup lang="ts">
import { computed } from 'vue'
import { useI18n } from 'vue-i18n'
import { useHead } from '@unhead/vue'
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]">
<RouterView />
</UApp>
</template>
支持的语言
默认使用 en 地区。
🇸🇦
阿拉伯语
代码:
ar🇦🇿
阿塞拜疆语
代码:
az🇧🇬
保加利亚语
代码:
bg🇧🇩
孟加拉语
代码:
bn🇪🇸
加泰罗尼亚语
代码:
ca🇮🇶
库尔德语
代码:
ckb🇨🇿
捷克语
代码:
cs🇩🇰
丹麦语
代码:
da🇩🇪
德语
代码:
de🇨🇭
瑞士德语
代码:
de-CH🇬🇷
希腊语
代码:
el🇬🇧
英语
代码:
en🇪🇸
西班牙语
代码:
es🇪🇪
爱沙尼亚语
代码:
et🇮🇷
波斯语
代码:
fa-IR🇫🇮
芬兰语
代码:
fi🇫🇷
法语
代码:
fr🇮🇱
希伯来语
代码:
he🇮🇳
印地语
代码:
hi🇭🇺
匈牙利语
代码:
hu🇦🇲
亚美尼亚语
代码:
hy🇮🇩
印度尼西亚语
代码:
id🇮🇹
意大利语
代码:
it🇯🇵
日语
代码:
ja🇬🇪
格鲁吉亚语
代码:
ka🇰🇿
哈萨克语
代码:
kk🇰🇭
高棉语
代码:
km🇰🇷
韩语
代码:
ko🇰🇬
吉尔吉斯语
代码:
ky🇱🇺
卢森堡语
代码:
lb🇱🇹
立陶宛语
代码:
lt🇲🇳
蒙古语
代码:
mn🇲🇾
马来语
代码:
ms🇳🇴
挪威语 (书面语)
代码:
nb-NO🇳🇱
荷兰语
代码:
nl🇵🇱
波兰语
代码:
pl🇵🇹
葡萄牙语
代码:
pt🇧🇷
葡萄牙语 (巴西)
代码:
pt-BR🇷🇴
罗马尼亚语
代码:
ro🇷🇺
俄语
代码:
ru🇸🇰
斯洛伐克语
代码:
sk🇸🇮
斯洛文尼亚语
代码:
sl🇸🇪
瑞典语
代码:
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"