nuxt-i18n

Compare original and translation side by side

🇺🇸

Original

English

🇨🇳

Translation

Chinese

Nuxt I18n

Nuxt I18n owns locale messages, localized routes, language detection, and locale metadata. Nuxt owns the surrounding page, rendering, and server lifecycle.

Nuxt I18n 负责语言环境消息、本地化路由、语言检测和语言环境元数据。Nuxt 负责页面渲染、服务器生命周期等周边功能。

Workflow

工作流程

Inspect the installed
```
@nuxtjs/i18n
```
version,
```
nuxt.config.*
```
,
```
i18n/i18n.config.*
```
, locale files, and affected pages. The setup is understood when locale codes, files,
```
defaultLocale
```
, and the routing strategy agree.
Open the smallest matching guide below. Keep module options in
```
nuxt.config
```
, Vue I18n options in
```
i18n.config
```
, and translated messages in locale files.
Implement with localized links and module composables so routing, message loading, and SEO share one locale state.
Run
```
nuxi prepare
```
and the project's typecheck, then visit the affected route in the default and one secondary locale. The change is complete when both locales render the expected message, URL, language metadata, and fallback behavior.

检查已安装的
```
@nuxtjs/i18n
```
版本、
```
nuxt.config.*
```
、
```
i18n/i18n.config.*
```
、语言环境文件及受影响的页面。当语言代码、文件、
```
defaultLocale
```
和路由策略保持一致时，即完成配置理解。
打开下方最匹配的指南。将模块选项保留在
```
nuxt.config
```
中，Vue I18n选项放在
```
i18n.config
```
中，翻译消息存储在语言环境文件里。
使用本地化链接和模块组合式API实现功能，确保路由、消息加载和SEO共享同一语言环境状态。
运行
```
nuxi prepare
```
和项目的类型检查，然后在默认语言环境和一个次要语言环境中访问受影响的路由。当两种语言环境均能渲染预期的消息、URL、语言元数据及降级行为时，即完成修改。

Routing

路由

Task	Open
Installation, locale objects, file layout, browser detection, or Vue I18n config	Configuration
Translation keys, interpolation, plurals, dates, numbers, or runtime message loading	Messages
Route strategies, localized links, switchers, custom paths, dynamic slugs, or SEO	Routing and SEO
Nuxt pages, middleware, data fetching, SSR state, or server routes	`nuxt` skill

任务	打开链接
安装、语言环境对象、文件布局、浏览器检测或Vue I18n配置	配置
翻译键、插值、复数、日期、数字或运行时消息加载	消息
路由策略、本地化链接、切换器、自定义路径、动态slug或SEO	路由与SEO
Nuxt页面、中间件、数据获取、SSR状态或服务器路由	`nuxt` 技能

Baseline

基础示例

bash

npx nuxi@latest module add @nuxtjs/i18n

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    defaultLocale: 'en',
    locales: [
      { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
      { code: 'fr', language: 'fr-FR', name: 'Français', file: 'fr.json' },
    ],
  },
})

json

{
  "welcome": "Welcome"
}

Locale files resolve from

i18n/locales/

by default. Use the same locale code in configuration, route helpers, locale files, and fallback rules.

bash

npx nuxi@latest module add @nuxtjs/i18n

export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    defaultLocale: 'en',
    locales: [
      { code: 'en', language: 'en-US', name: 'English', file: 'en.json' },
      { code: 'fr', language: 'fr-FR', name: 'Français', file: 'fr.json' },
    ],
  },
})

json

{
  "welcome": "Welcome"
}

语言环境文件默认从

i18n/locales/

目录读取。在配置、路由助手、语言环境文件和降级规则中使用相同的语言代码。