使用 locale 属性，并从 @nuxt/ui/locale 中选择您想要使用的语言环境。
<script setup lang="ts">
import { fr } from '@nuxt/ui/locale'
</script>
<template>
<UApp :locale="fr">
<RouterView />
</UApp>
</template>
您可以使用 defineLocale 可组合函数创建自己的语言环境。
<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>
code 参数，您需要在此处传递语言的 ISO 代码。例如：hi 印地语（语言）de-AT：奥地利使用的德语（语言）您可以通过使用 extendLocale 可组合函数覆盖其 messages 或 code 来定制现有语言环境。
<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>
要动态切换语言，您可以使用Vue I18n插件。
pnpm add vue-i18n@11
yarn add vue-i18n@11
npm install vue-i18n@11
bun add vue-i18n@11
main.ts 中使用 Vue I18n 插件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 属性。<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>
每个语言环境都有一个 dir 属性，App 组件将使用该属性来设置所有组件的方向。
在多语言应用程序中，您可能希望根据用户的语言环境动态设置 lang 和 dir 属性在 <html> 元素上，您可以使用useHead可组合函数来实现
<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>
默认情况下，使用 en 语言环境。
arazbgbncackbcsdadede-CHelenesetfa-IRfifrhehihrhuhyiditjakakkkmkokylbltmnmsnb-NOnlplptpt-BRroruskslsvthtjtrug-CNukuruzvizh-CNzh-TWnuxt-ui CLI 创建新的语言环境。nuxt-ui make locale --code "en" --name "English"