国际化 (i18n)

了解如何通过多方向支持 (LTR/RTL) 来国际化您的 Nuxt 应用。

用法

Nuxt UI 提供了一个 App 组件，用于包装您的应用以提供全局配置。

区域设置

使用 locale 属性，其值为您想从 @nuxt/ui/locale 使用的区域设置。

app.vue
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>

<template>
  <UApp :locale="fr">
    <NuxtPage />
  </UApp>
</template>

使用 locale 属性，其值为您想从 @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: 德语 (语言)，在奥地利 (地区) 使用

扩展区域设置

您可以通过使用 extendLocale 可组合函数，覆盖现有区域设置的 messages 或 code 来对其进行自定义。

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>
app.vue
<script setup lang="ts">
import { en } from '@nuxt/ui-pro/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

在您的 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>
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 属性，这可以通过以下方式实现：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>
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ərbaycanca
代码: az
🇧🇬
Български
代码: bg
🇧🇩
বাংলা
代码: bn
🇪🇸
Català
代码: ca
🇮🇶
کوردی
代码: ckb
🇨🇿
Čeština
代码: cs
🇩🇰
Danish
代码: da
🇩🇪
Deutsch
代码: de
🇬🇷
Ελληνικά
代码: el
🇬🇧
English
代码: en
🇪🇸
Español
代码: es
🇪🇪
Eesti
代码: et
🇮🇷
فارسی
代码: fa-IR
🇫🇮
Suomeksi
代码: fi
🇫🇷
Français
代码: fr
🇮🇱
Hebrew
代码: he
🇮🇳
Hindi
代码: hi
🇭🇺
Magyar
代码: hu
🇦🇲
Հայերեն
代码: hy
🇮🇩
Indonesia
代码: id
🇮🇹
Italiano
代码: it
🇯🇵
日本語
代码: ja
🇰🇿
Қазақша
代码: 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
如果您需要更多语言，可以通过创建 PR 在 src/runtime/locale/ 中添加新的区域设置。
您可以使用 nuxt-ui CLI 创建新的区域设置
nuxt-ui make locale --code "en" --name "English"

颜色模式

Nuxt UI 与 Nuxt 颜色模式集成，可轻松在浅色和深色主题之间切换。

defineShortcuts

一个用于在您的应用程序中定义键盘快捷键的可组合函数。