国际化 (i18n)
Nuxt UI 支持 50 多种语言环境以及多方向（LTR/RTL）国际化。
用法
语言环境 (Locale)
通过 locale 属性使用从 @nuxt/ui/locale 导出的你所需要的语言环境。
app.vue
<script setup lang="ts">
import { fr } from '@nuxt/ui/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>
查看
code 参数，你需要在此处传入该语言的 ISO 代码。示例：hi印地语（语言）de-AT：奥地利使用的德语（地区）
扩展语言环境
你可以使用 extendLocale 工具，通过覆盖现有的 messages 或 code 来自定义它。
app.vue
<script setup lang="ts">
import { en } from '@nuxt/ui/locale'
const locale = extendLocale(en, {
code: 'en-AU',
messages: {
commandPalette: {
placeholder: 'Search a component...'
}
}
})
</script>
<template>
<UApp :locale="locale">
<NuxtPage />
</UApp>
</template>
动态区域设置
要动态切换语言，可以使用 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 属性
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>
自动链接本地化 4.7+
当安装了 @nuxtjs/i18n 时，Link 组件会自动使用 $localePath 辅助函数对内部链接进行本地化。这意味着你无需手动使用 localePath() 或 localeRoute() 来包裹你的链接。
<template>
<!-- Automatically becomes /en/about or /fr/about based on current locale -->
<ULink to="/about">About</ULink>
<UButton to="/contact">Contact</UButton>
</template>
外部链接和绝对 URL 会被自动检测并跳过本地化。如果需要，你仍然可以手动使用
localePath() 或 localeRoute()。动态布局方向
每个语言环境都有一个 dir 属性，该属性将被 App 组件用于设置所有组件的布局方向。
在多语言应用程序中，你可能需要根据用户的语言环境动态地在 <html> 元素上设置 lang 和 dir 属性，你可以使用 useHead 可组合函数来实现。
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>
支持的语言
默认情况下，使用 en 语言环境。
🇸🇦
العربية
代码:
ar🇦🇿
Azərbaycanca
代码:
az🇧🇾
Беларуская
代码:
be🇧🇬
Български
代码:
bg🇧🇩
বাংলা
代码:
bn🇪🇸
Català
代码:
ca🇮🇶
کوردی
代码:
ckb🇨🇿
Čeština
代码:
cs🇩🇰
Danish
代码:
da🇩🇪
Deutsch
代码:
de🇨🇭
Schweizerdeutsch
代码:
de-CH🇬🇷
Ελληνικά
代码:
el🇺🇸
英语
代码:
en🇬🇧
English (United Kingdom)
代码:
en-GB🇪🇸
Español
代码:
es🇪🇪
Eesti
代码:
et🇪🇸
Euskera
代码:
eu🇮🇷
فارسی
代码:
fa-IR🇫🇮
Suomeksi
代码:
fi🇫🇷
Français
代码:
fr🇪🇸
Galego
代码:
gl🇮🇱
Hebrew
代码:
he🇮🇳
Hindi
代码:
hi🇭🇷
Hrvatski
代码:
hr🇭🇺
Magyar
代码:
hu🇦🇲
Հայերեն
代码:
hy🇮🇩
Bahasa Indonesia
代码:
id🇮🇸
Icelandic
代码:
is🇮🇹
Italiano
代码:
it🇯🇵
日本語
代码:
ja🇬🇪
ქართული
代码:
ka🇰🇿
Қазақша
代码:
kk🇰🇭
ភាសាខ្មែរ
代码:
km🇰🇷
한국어
代码:
ko🇰🇬
Кыргызча
代码:
ky🇱🇺
Lëtzebuergesch
代码:
lb🇱🇦
ລາວ
代码:
lo🇱🇹
Lietuvių
代码:
lt🇲🇳
Монгол
代码:
mn🇲🇾
Melayu
代码:
ms🇳🇴
Norsk Bokmål
代码:
nb-NO🇳🇱
Nederlands
代码:
nl🇵🇱
Polski
代码:
pl🇵🇹
Português
代码:
pt🇧🇷
Português (Brasil)
代码:
pt-BR🇷🇴
Română
代码:
ro🇷🇺
Русский
代码:
ru🇸🇰
Slovenčina
代码:
sk🇸🇮
Slovenščina
代码:
sl🇦🇱
Shqip
代码:
sq🇸🇪
Svenska
代码:
sv🇹🇭
ไทย
代码:
th🇹🇯
Тоҷикӣ
代码:
tj🇹🇷
Türkçe
代码:
tr🇨🇳
ئۇيغۇرچە
代码:
ug-CN🇺🇦
Українська
代码:
uk🇵🇰
Urdu
代码:
ur🇺🇿
Oʻzbek
代码:
uz🇻🇳
Tiếng Việt
代码:
vi🇨🇳
简体中文
代码:
zh-CN🇹🇼
繁體中文
代码:
zh-TW你可以使用
nuxt-ui CLI 来创建一个新的语言环境。nuxt-ui make locale --code "en" --name "English"