国际化 (i18n)

了解如何使用多方向支持（从左到右/从右到左）国际化您的 Nuxt 应用程序。

用法

Nuxt UI 提供了一个 App 组件，它包裹您的应用程序以提供全局配置。

区域设置

使用 locale 属性，其值来自 @nuxt/ui/locale 中您要使用的区域设置：

app.vue

<script setup lang="ts">
import { fr } from '@nuxt/content/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/content'

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

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/content',
    '@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/content/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 组件将使用它来设置所有组件的方向性。

在多语言应用程序中，您可能希望根据用户的区域设置动态设置 <html> 元素上的 lang 和 dir 属性，您可以使用 useHead 可组合项来实现：

app.vue

<script setup lang="ts">
import * as locales from '@nuxt/content/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>

支持的语言

By default, the en locale is used.

🇸🇦

العربية

Code: ar

🇦🇿

Azərbaycanca

Code: az

🇧🇬

Български

Code: bg

🇧🇩

বাংলা

Code: bn

🇪🇸

Català

Code: ca

🇮🇶

کوردی

Code: ckb

🇨🇿

Čeština

Code: cs

🇩🇰

Danish

Code: da

🇩🇪

Deutsch

Code: de

🇬🇷

Ελληνικά

Code: el

🇬🇧

English

Code: en

🇪🇸

Español

Code: es

🇪🇪

Eesti

Code: et

🇮🇷

فارسی

Code: fa-IR

🇫🇮

Suomeksi

Code: fi

🇫🇷

Français

Code: fr

🇮🇱

Hebrew

Code: he

🇮🇳

Hindi

Code: hi

🇭🇺

Magyar

Code: hu

🇦🇲

Հայերեն

Code: hy

🇮🇩

Indonesia

Code: id

🇮🇹

Italiano

Code: it

🇯🇵

日本語

Code: ja

🇰🇿

Қазақша

Code: kk

🇰🇭

ភាសាខ្មែរ

Code: km

🇰🇷

한국어

Code: ko

🇰🇬

Кыргызча

Code: ky

🇱🇺

Lëtzebuergesch

Code: lb

🇱🇹

Lietuvių

Code: lt

🇲🇳

Монгол

Code: mn

🇲🇾

Melayu

Code: ms

🇳🇴

Norsk Bokmål

Code: nb-NO

🇳🇱

Nederlands

Code: nl

🇵🇱

Polski

Code: pl

🇵🇹

Português

Code: pt

🇧🇷

Português (Brasil)

Code: pt-BR

🇷🇴

Română

Code: ro

🇷🇺

Русский

Code: ru

🇸🇰

Slovenčina

Code: sk

🇸🇮

Slovenščina

Code: sl

🇸🇪

Svenska

Code: sv

🇹🇭

ไทย

Code: th

🇹🇯

Тоҷикӣ

Code: tj

🇹🇷

Türkçe

Code: tr

🇨🇳

ئۇيغۇرچە

Code: ug-CN

🇺🇦

Українська

Code: uk

🇵🇰

Urdu

Code: ur

🇺🇿

Oʻzbek

Code: uz

🇻🇳

Tiếng Việt

Code: vi

🇨🇳

简体中文

Code: zh-CN

🇹🇼

繁體中文

Code: zh-TW

如果你需要额外的语言支持，可以通过创建一个 PR，在 src/runtime/locale/ 目录中添加新的语言环境。

你可以使用 nuxt-ui 命令行工具来创建新的语言环境：

nuxt-ui make locale --code "en" --name "English"

颜色模式

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

defineShortcuts

一个用于在您的应用中定义键盘快捷键的可组合项。