国际化 (i18n)

了解如何通过支持多方向（LTR/RTL）来国际化你的 Vue 应用。

使用

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

语言环境

使用 locale prop，并传入你想从 @nuxt/ui/locale 中使用的语言环境。

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

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

使用 locale prop，并传入你想从 @nuxt/ui-pro/locale 中使用的语言环境。

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

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

自定义语言环境

你也可以使用 defineLocale 添加你的语言环境。

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>
App.vue
<script setup lang="ts">
import type { Messages } from '@nuxt/ui-pro'
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: 德语 (语言) 在奥地利 (地区) 的用法

动态语言环境

要在语言之间动态切换，你可以使用Vue I18n插件。

安装 Vue I18n 包

pnpm add vue-i18n@10

在你的 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 prop

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>
App.vue
<script setup lang="ts">
import { useI18n } from 'vue-i18n'
import * as locales from '@nuxt/ui-pro/locale'

const { locale } = useI18n()
</script>

<template>
  <UApp :locale="locales[locale]">
    <RouterView />
  </UApp>
</template>

动态方向

每个语言环境都有一个 dir 属性，App 组件将使用此属性来设置所有组件的方向性。

在多语言应用中，你可能希望根据用户的语言环境动态设置 lang 和 dir 属性在 <html> 元素上，这可以通过useHead组合式函数

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>
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-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]">
    <RouterView />
  </UApp>
</template>

支持的语言

默认使用 en 语言环境。

🇸🇦
العربية
代码: ar
🇦🇿
Azərbaycanca
代码: az
🇧🇬
Български
代码: bg
🇧🇩
বাংলা
代码: bn
🇪🇸
Català
代码: ca
🇮🇶
کوردی
代码: ckb
🇨🇿
Čeština
代码: cs
🇩🇰
丹麦语
代码: da
🇩🇪
Deutsch
代码: de
🇬🇷
Ελληνικά
代码: el
🇬🇧
英语
代码: en
🇪🇸
Español
代码: es
🇪🇪
Eesti
代码: et
🇮🇷
فارسی
代码: fa-IR
🇫🇮
Suomeksi
代码: fi
🇫🇷
Français
代码: fr
🇮🇱
希伯来语
代码: he
🇮🇳
印地语
代码: hi
🇭🇺
Magyar
代码: hu
🇦🇲
Հայերեն
代码: hy
🇮🇩
印度尼西亚语
代码: id
🇮🇹
Italiano
代码: it
🇯🇵
日语
代码: ja
🇰🇿
Қазақша
代码: kk
🇰🇭
ភាសាខ្មែរ
代码: km
🇰🇷
韩语
代码: ko
🇳🇴
Norsk Bokmål
代码: nb-NO
🇳🇱
Nederlands
代码: nl
🇵🇱
Polski
代码: pl
🇵🇹
Português
代码: pt
🇧🇷
Português (Brasil)
代码: pt-BR
🇷🇴
Română
代码: ro
🇷🇺
俄语
代码: ru
🇸🇰
Slovenčina
代码: sk
🇸🇪
Svenska
代码: sv
🇹🇭
ไทย
代码: th
🇹🇯
Тоҷикӣ
代码: tj
🇹🇷
Türkçe
代码: tr
🇨🇳
ئۇيغۇرچە
代码: ug-CN
🇺🇦
Українська
代码: uk
🇵🇰
乌尔都语
代码: 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 集成了 VueUse，可以轻松切换亮色和暗色主题。

defineShortcuts

一个用于在应用中定义键盘快捷键的组合式函数。