Skip to main content
skill CX Codex

nuxt-i18n — Claude Code skill for Nuxt localization

A skill that walks your coding agent through @nuxtjs/i18n setup: locales, translated routes, language detection and locale SEO.

Install into Claude Code · Skills CLI (Vercel) All methods and platforms ↓
npx skills add onmax/nuxt-skills --skill nuxt-i18n -a claude-code
Open on GitHub

What nuxt-i18n does

The skill covers locale messages, localized routes, language detection and locale metadata in Nuxt. Before touching anything, the agent inspects the installed @nuxtjs/i18n version, nuxt.config.*, i18n/i18n.config.*, locale files and the pages involved, then opens the matching reference.

Three references ship with it: configuration (locale objects, file layout, browser detection, Vue I18n options), messages (translation keys, interpolation, plurals, dates, numbers, runtime loading) and routing plus SEO (route strategies, localized links, switchers, custom paths, dynamic slugs). Module options stay in nuxt.config, Vue I18n options in i18n.config, translations in locale files. Locale files resolve from i18n/locales/ by default.

After the change the agent runs nuxi prepare and the project typecheck, then opens the affected route in the default locale and one secondary locale. Scope is i18n only — pages, middleware, data fetching and server routes belong to the separate nuxt skill, so a project with custom SSR state means hopping between the two.

What it helps with

  • add a second locale to a Nuxt app
  • set up browser language detection
  • translate routes and internal links
  • build a language switcher for the header
  • configure fallback to the default locale

Example prompts for the agent

  • set up @nuxtjs/i18n with en and fr locales, files under i18n/locales
  • add a language switcher to the header and localize the links
  • add per-locale SEO metadata to the pages

How to install nuxt-i18n

1Skills CLI (Vercel)

npx skills add onmax/nuxt-skills --skill nuxt-i18n -a claude-code

2Manually: put the files in place

~/.claude/skills/nuxt-i18n/SKILL.md

Copy the whole skill folder; for one project use .claude/skills/nuxt-i18n/

Step by step, with commands for each platform: How to install skills in Claude Code: five ways

Questions about nuxt-i18n

How do I install nuxt-i18n in Claude?

Run npx skills add onmax/nuxt-skills --skill nuxt-i18n -a claude-code. The skill lands in ~/.claude/skills/nuxt-i18n/SKILL.md.

What does nuxt-i18n do?

It guides the agent through locale setup, message and route translation, browser detection and locale SEO for Nuxt apps using @nuxtjs/i18n.

Which other platforms are supported?

Codex, Cursor, GitHub Copilot, Gemini CLI and OpenCode, each with its own install command.

Source text

SKILL.md · MIT
---
name: nuxt-i18n
description: Internationalize Nuxt applications with @nuxtjs/i18n. Use when configuring locales or browser detection, translating messages or routes, building locale switchers, handling fallbacks, lazy-loading messages, or adding locale SEO.
license: MIT
---

# Nuxt I18n

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

## Workflow

1. 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.
2. Open the smallest matching guide below. Keep module options in `nuxt.config`, Vue I18n options in `i18n.config`, and translated messages in locale files.
3. Implement with localized links and module composables so routing, message loading, and SEO share one locale state.
4. 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.

## Routing

| Task                                                                                 | Open                                         |
| ------------------------------------------------------------------------------------ | -------------------------------------------- |
| Installation, locale objects, file layout, browser detection, or Vue I18n config     | [Configuration](references/configuration.md) |
| Translation keys, interpolation, plurals, dates, numbers, or runtime message loading | [Messages](references/messages.md)           |
| Route strategies, localized links, switchers, custom paths, dynamic slugs, or SEO    | [Routing and SEO](references/routing.md)     |
| Nuxt pages, middleware, data fetching, SSR state, or server routes                   | `nuxt` skill                                 |

## Baseline

```bash
npx nuxi@latest module add @nuxtjs/i18n
```

```ts
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.

© onmax · MIT · onmax/nuxt-skills

Similar skills

Everything for Frontend and UI →

From the same set8

Project sponsors

Companies that keep this analytics open
Gold sponsor

Impressions, clicks and code copies — open statistics. We keep the numbers public for the same reason NeBlask itself is public. Become a sponsor