Nuxt I18n

by onmax008232b5d7a5MIT719 starsListed Oct 8, 2026Updated Oct 8, 2026Repository updated 2 days ago

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.

Instructions onlySoftware Development

AI-generated overview

Guides internationalizing Nuxt apps with @nuxtjs/i18n: locales, messages, routes, detection, fallbacks and SEO.

What it does: Provides a workflow and reference guides for adding @nuxtjs/i18n to a Nuxt project. It covers module configuration, locale files, translated messages, localized routes, language detection, fallbacks, lazy loading and locale SEO. It routes the agent to the smallest matching reference document and includes a baseline config example.
When to use it: Use when configuring locales or browser detection in a Nuxt app, translating messages or routes, building locale switchers, handling fallbacks, lazy-loading messages, or adding locale SEO.
Requirements: A Nuxt project with the @nuxtjs/i18n module; the skill is instructions only and ships no scripts. It references running nuxi prepare and the project's typecheck.

Nuxt I18n

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

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.

Routing

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

Baseline

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

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

Locale files resolve from i18n/locales/ by default. Use the same locale code in configuration, route helpers, locale files, and fallback rules.

Source and attribution

Source:onmax/nuxt-skillsinskills/nuxt-i18nat commit008232b

License: MIT

Content belongs to its original authors. SourceWeft indexes it from a public repository.

Report or request removal

Nuxt I18n

Nuxt I18n

Workflow

Routing

Baseline

Source and attribution

More from onmax/nuxt-skills

Vue

Nuxt Ui

Nuxt Modules

More in Software Development

Playground

M5 Onboard

Cardputer Buddy

Web Design Guidelines

Vercel React Native Skills

Vercel React Best Practices