Nuxt UI 国际化(i18n)配置指南

最新推荐文章于 2025-06-08 09:18:54 发布

裴进众Serene

最新推荐文章于 2025-06-08 09:18:54 发布

阅读量244

点赞数 3

本文链接：https://blog.csdn.net/gitblog_01161/article/details/148508382

版权

Nuxt UI 国际化(i18n)配置指南

ui A UI Library for Modern Web Apps, powered by Vue & TailwindCSS. 项目地址: https://gitcode.com/gh_mirrors/ui4/ui

前言

在当今全球化的互联网环境中，为应用提供多语言支持已成为基本需求。Nuxt UI 提供了完善的国际化(i18n)解决方案，支持多语言切换和双向文本(LTR/RTL)布局。本文将详细介绍如何在 Nuxt 项目中配置和使用 Nuxt UI 的国际化功能。

基础配置

1. 设置默认语言

Nuxt UI 通过 UApp 组件的 locale 属性来配置应用语言。首先需要从相应包中导入语言包：

<script setup lang="ts">
import { fr } from '@nuxt/ui/locale' // 导入法语包
</script>

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

2. 自定义语言包

如果内置语言包不满足需求，可以创建自定义语言包：

<script setup lang="ts">
import type { Messages } from '@nuxt/ui'

const locale = defineLocale<Messages>({
  name: '简体中文', // 语言名称
  code: 'zh-CN',   // 语言代码
  dir: 'ltr',      // 文本方向
  messages: {
    // 实现键值对翻译
    button: {
      submit: '提交',
      cancel: '取消'
    }
    // 其他翻译项...
  }
})
</script>

高级用法

1. 动态语言切换

结合 Nuxt I18n 模块可以实现动态语言切换：

首先安装依赖：

pnpm add @nuxtjs/i18n

配置 nuxt.config.ts：

export default defineNuxtConfig({
  modules: ['@nuxt/ui', '@nuxtjs/i18n'],
  i18n: {
    locales: [
      { code: 'zh', name: '中文' },
      { code: 'en', name: 'English' }
    ]
  }
})

在应用中使用：

<script setup lang="ts">
import * as locales from '@nuxt/ui/locale'
const { locale } = useI18n()
</script>

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

2. 动态文本方向处理

对于支持RTL(从右到左)语言的应用，需要动态设置文本方向：

<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>