@nuxtjs/i18n — Internationalization

@nuxtjs/i18n adds locale-prefixed routes, translation messages, and locale-aware links to your Nuxt app with minimal boilerplate.

4 min read Level 3/5 #nuxt#i18n

What you'll learn

Install and configure the i18n module with locale definitions
Use the $t() helper in templates to render translations
Generate locale-aware URLs with switchLocalePath

@nuxtjs/i18n wraps vue-i18n and adds the bits that matter for SSR apps: prefixed routes, SEO hreflang tags, and locale-aware navigation.

Install

npx nuxi module add @nuxtjs/i18n

Configure Locales

// nuxt.config.ts
export default defineNuxtConfig({
  modules: ['@nuxtjs/i18n'],
  i18n: {
    defaultLocale: 'en',
    locales: [
      { code: 'en', file: 'en.json', name: 'English' },
      { code: 'fr', file: 'fr.json', name: 'Français' },
    ],
    strategy: 'prefix_except_default',
  },
})

Message files live under i18n/locales/:

{
  "hello": "Hello",
  "welcome": "Welcome, {name}!"
}

Translate in Templates

<template>
  <h1>{{ $t('hello') }}</h1>
  <p>{{ $t('welcome', { name: 'Ada' }) }}</p>
</template>

Switch Locales

switchLocalePath builds the URL of the current page in another locale — useful for language pickers:

<script setup lang="ts">
const switchLocalePath = useSwitchLocalePath()
</script>

<template>
  <NuxtLink :to="switchLocalePath('fr')">Français</NuxtLink>
  <NuxtLink :to="switchLocalePath('en')">English</NuxtLink>
</template>

Routing Strategies

prefix_except_default — default locale at /, others prefixed (/fr/about).
prefix — every locale prefixed (/en/about, /fr/about).
no_prefix — single URL, locale switched via cookie/header.

Pick the strategy that matches your SEO and UX needs.

Build Your Own Module →