使用 locale prop，并选择您想使用的语言环境，这些语言环境来自 @nuxt/ui/locale
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>
<template>
<UApp :locale="fr">
<NuxtPage />
</UApp>
</template>
您可以使用 defineLocale 可组合函数创建自己的语言环境
<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：奥地利使用的德语（语言）您可以通过使用 extendLocale 可组合函数覆盖现有语言环境的 messages 或 code 来定制它
<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模块。
pnpm add @nuxtjs/i18n
yarn add @nuxtjs/i18n
npm install @nuxtjs/i18n
bun add @nuxtjs/i18n
nuxt.config.ts 中添加 Nuxt I18n 模块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<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 组件将使用该属性来设置所有组件的方向性。
在多语言应用程序中，您可能希望根据用户的语言环境动态设置 lang 和 dir 属性在 <html> 元素上，您可以使用useHead可组合函数
<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 语言环境。
arazbgbncackbcsdadede-CHelenesetfa-IRfifrhehihrhuhyiditjakakkkmkokylbltmnmsnb-NOnlplptpt-BRroruskslsvthtjtrug-CNukuruzvizh-CNzh-TWnuxt-ui CLI 创建新的语言环境nuxt-ui make locale --code "en" --name "English"