nuxt-i18n

Configure locales, translated routes, and localized messages in Nuxt applications with @nuxtjs/i18n.

Updated Aug 8, 2026
One-click install
npx skills add https://github.com/wolfstar-project/code-zero --skill nuxt-i18n-wolfstar-project
Or copy as Structured Prompt for Agent▼
Please help me install this Agent Skill.
Skill: nuxt-i18n
Source: https://github.com/wolfstar-project/code-zero/tree/main/.agents/skills/nuxt-i18n
Command: npx skills add https://github.com/wolfstar-project/code-zero --skill nuxt-i18n-wolfstar-project

SYSTEM DOCUMENTATION & REQUIREMENTS

💡 This Skill requires @nuxtjs/i18n, and includes references (resource) components.

What problem does it solve? Adding internationalization to a Nuxt app involves coordinating module options, Vue I18n config, locale files, routing strategies, and SEO metadata, and misconfiguring any one of them produces broken URLs, missing translations, or wrong language tags. This Skill provides structured guidance for setting up and maintaining @nuxtjs/i18n correctly. ## Core Features & Use Cases - Configuration Guidance: Define locale objects, browser language detection, lazy-loaded locale files, and the split between nuxt.config module options and i18n.config Vue I18n options. - Message Translation: Translate with interpolation, plurals, date and number formats, component-local i18n blocks, and runtime-loaded messages from APIs. - Routing and SEO: Choose route strategies, build localized links and locale switchers, define custom translated paths, and generate hreflang and canonical metadata. - Use Case: You need to add French support to an English Nuxt site with clean URLs for English, prefixed URLs for French, a language switcher, and correct SEO tags. This Skill walks through locale configuration, message files, routing strategy, and verification in both locales. ## Quick Start Use the nuxt-i18n skill to add English and French locales with a language switcher and localized routes to my Nuxt application.

Frequently Asked Questions about nuxt-i18n

High-intent search queries and answers about installing and using this skill.

FAQPage Schema
How do I add multiple languages to a Nuxt app?▼

Install @nuxtjs/i18n with nuxi module add, then define locales in nuxt.config with code, language, name, and file properties. Place translation JSON files in i18n/locales/ and use the same locale codes across configuration, routes, and fallback rules.

How to create a language switcher in Nuxt i18n?▼

Use the SwitchLocalePathLink component with the locales list from useI18n to render links to the current page in each available locale. For no_prefix strategies or non-navigating controls, call await setLocale(code) instead.

What is the difference between prefix_except_default and prefix route strategies?▼

prefix_except_default keeps the default locale on clean URLs like /about while prefixing others like /fr/about. The prefix strategy gives every locale an explicit URL namespace such as /en/about and /fr/about.

Does @nuxtjs/i18n support lazy-loading translation files?▼

Yes, locale files listed with file or files in the locale configuration are lazy-loaded automatically. Multiple files per locale load in array order, with later files overriding earlier keys.

Why are my Nuxt i18n translations falling back to the wrong locale?▼

fallbackLocale in i18n/i18n.config.ts controls message fallback, while defaultLocale in nuxt.config controls the default route locale. Configure both deliberately and verify a missing secondary-locale key resolves through the intended fallback.