国际化 (i18n)
Nuxt UI 支持 50 多个地区设置和多方向 (LTR/RTL) 国际化。
用法
地区设置
使用 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>
自定义地区设置
您可以使用 defineLocale composable 创建自己的地区设置。
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：德语（语言），在奥地利（地区）使用。
扩展地区设置
您可以通过覆盖 messages 或 code 来自定义现有地区设置，使用 extendLocale composable。
app.vue
<script setup lang="ts">
import { en } from '@nuxt/ui/locale'
const locale = extendLocale(en, {
code: 'en-GB',
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 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>
动态方向
每个地区设置都有一个 dir 属性，该属性将由 App 组件使用，以设置所有组件的方向性。
在多语言应用程序中，您可能希望根据用户的地区设置动态设置 <html> 元素的 lang 和 dir 属性，您可以使用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>
支持的语言
默认使用 en 地区设置。
🇸🇦
العربية
代码:
ar🇦🇿
Azərbaycanca
代码:
az🇧🇬
Български
代码:
bg🇧🇩
বাংলা
代码:
bn🇪🇸
Català
代码:
ca🇮🇶
کوردی
代码:
ckb🇨🇿
Čeština
代码:
cs🇩🇰
Danish
代码:
da🇩🇪
Deutsch
代码:
de🇨🇭
Schweizerdeutsch
代码:
de-CH🇬🇷
Ελληνικά
代码:
el🇬🇧
英语
代码:
en🇪🇸
Español
代码:
es🇪🇪
Eesti
代码:
et🇮🇷
فارسی
代码:
fa-IR🇫🇮
Suomeksi
代码:
fi🇫🇷
Français
代码:
fr🇮🇱
Hebrew
代码:
he🇮🇳
Hindi
代码:
hi🇭🇺
Magyar
代码:
hu🇦🇲
Հայերեն
代码:
hy🇮🇩
Bahasa Indonesia
代码:
id🇮🇹
Italiano
代码:
it🇯🇵
日本語
代码:
ja🇬🇪
ქართული
代码:
ka🇰🇿
Қазақша
代码:
kk🇰🇭
ភាសាខ្មែរ
代码:
km🇰🇷
한국어
代码:
ko🇰🇬
Кыргызча
代码:
ky🇱🇺
Lëtzebuergesch
代码:
lb🇱🇹
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🇸🇪
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"