国际化 (i18n)

了解如何通过多方向支持（从左到右/从右到左）来国际化您的 Vue 应用。

用法

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

区域设置

使用 locale 属性指定您想从 @nuxt/ui/locale 使用的区域设置。

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

<template>
  <UApp :locale="fr">
    <RouterView />
  </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">
    <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：德语 (语言)，奥地利 (地区) 用法

扩展区域设置

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

App.vue
<script setup lang="ts">
import { en } from '@nuxt/ui/locale'
import { extendLocale } from '@nuxt/ui/composables/defineLocale.js'

const locale = extendLocale(en, {
  code: 'en-GB',
  messages: {
    commandPalette: {
      placeholder: 'Search a component...'
    }
  }
})
</script>

<template>
  <UApp :locale="locale">
    <RouterView />
  </UApp>
</template>
App.vue
<script setup lang="ts">
import { en } from '@nuxt/ui-pro/locale'
import { extendLocale } from '@nuxt/ui/composables/defineLocale.js'

const locale = extendLocale(en, {
  code: 'en-GB',
  messages: {
    commandPalette: {
      placeholder: 'Search a component...'
    }
  }
})
</script>

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

动态区域设置

要动态切换语言，您可以使用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 属性

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 属性，这可以通过以下方式实现：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
🇧🇬
保加利亚语
代码: bg
🇧🇩
孟加拉语
代码: bn
🇪🇸
加泰罗尼亚语
代码: ca
🇮🇶
库尔德语
代码: ckb
🇨🇿
捷克语
代码: cs
🇩🇰
丹麦语
代码: da
🇩🇪
德语
代码: de
🇬🇷
希腊语
代码: el
🇬🇧
英语
代码: en
🇪🇸
西班牙语
代码: es
🇪🇪
爱沙尼亚语
代码: et
🇮🇷
波斯语
代码: fa-IR
🇫🇮
芬兰语
代码: fi
🇫🇷
法语
代码: fr
🇮🇱
希伯来语
代码: he
🇮🇳
印地语
代码: hi
🇭🇺
匈牙利语
代码: hu
🇦🇲
亚美尼亚语
代码: hy
🇮🇩
印度尼西亚语
代码: id
🇮🇹
意大利语
代码: it
🇯🇵
日语
代码: ja
🇰🇿
哈萨克语
代码: kk
🇰🇭
高棉语
代码: km
🇰🇷
韩语
代码: ko
🇰🇬
吉尔吉斯语
代码: ky
🇱🇺
卢森堡语
代码: lb
🇱🇹
立陶宛语
代码: lt
🇲🇳
蒙古语
代码: mn
🇲🇾
马来语
代码: ms
🇳🇴
挪威语（博克马尔语）
代码: nb-NO
🇳🇱
荷兰语
代码: nl
🇵🇱
波兰语
代码: pl
🇵🇹
葡萄牙语
代码: pt
🇧🇷
葡萄牙语（巴西）
代码: pt-BR
🇷🇴
罗马尼亚语
代码: ro
🇷🇺
俄语
代码: ru
🇸🇰
斯洛伐克语
代码: sk
🇸🇮
斯洛文尼亚语
代码: sl
🇸🇪
瑞典语
代码: sv
🇹🇭
泰语
代码: th
🇹🇯
塔吉克语
代码: tj
🇹🇷
土耳其语
代码: tr
🇨🇳
维吾尔语
代码: ug-CN
🇺🇦
乌克兰语
代码: uk
🇵🇰
乌尔都语
代码: ur
🇺🇿
乌兹别克语
代码: uz
🇻🇳
越南语
代码: vi
🇨🇳
简体中文
代码: zh-CN
🇹🇼
繁体中文
代码: zh-TW
如果您需要其他语言，可以通过创建 PR 在 src/runtime/locale/ 中添加新的区域设置来贡献。
您可以使用 nuxt-ui CLI 创建新的区域设置。
nuxt-ui make locale --code "en" --name "English"

颜色模式

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

defineShortcuts

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