mcpField
N
nuxt-i18n

nuxt-i18n

github.com/onmax开发723607 次安装今天更新
代码仓库

关于 nuxt-i18n

面向 Nuxt 项目开发者的 Nuxt I18n 本地化技能，涵盖语言消息、本地化路由、语言检测和元数据，并区分模块、Vue I18n 与 Nuxt 的职责。

主要功能

  1. 01检查语言配置
  2. 02管理翻译消息
  3. 03配置本地化路由
  4. 04使用本地化链接和组合式函数
  5. 05检查页面渲染与 SEO 元数据

适用场景

  1. 01为 Nuxt 项目添加语言
  2. 02更新翻译和插值
  3. 03实现语言切换器
  4. 04验证本地化路由与元数据

安装

复制下面的命令，在终端中运行。

$npx skills add https://github.com/onmax/nuxt-skills --skill nuxt-i18n

安装后在 Claude Code 中输入/nuxt-i18n确认已加载。

包含的文件

除 SKILL.md 外，安装时一起下载的参考资料和脚本。

agents/
openai.yaml
references/
configuration.md
messages.md
routing.md

详细介绍

Nuxt I18n

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

工作流

  1. 检查已安装的 @nuxtjs/i18n 版本、nuxt.config.*、i18n/i18n.config.*、语言环境文件和受影响的页面。当语言环境代码、文件、defaultLocale 和路由策略彼此一致时，便可确认已了解配置。
  2. 打开下方最匹配的指南。将模块选项放在 nuxt.config 中，将 Vue I18n 选项放在 i18n.config 中，并将翻译后的消息放在语言环境文件中。
  3. 使用本地化链接和模块组合式函数进行实现，让路由、消息加载和 SEO 共用一个语言环境状态。
  4. 运行 nuxi prepare 和项目的类型检查，然后分别访问默认语言环境和另一个语言环境中的受影响路由。当两个语言环境都能呈现预期的消息、URL、语言元数据和回退行为时，变更即告完成。

路由

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

基线

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' },
    ],
  },
})

{
  "welcome": "Welcome"
}

默认情况下，语言环境文件从 i18n/locales/ 解析。配置、路由辅助函数、语言环境文件和回退规则中应使用相同的语言环境代码。

评论

支持 Markdown