Prerequisites
- Nuxt 3 application
- Node.js 18+
- Basic vue-i18n knowledge (optional)
Common Challenges
Problems developers face when localizing Nuxt apps—and how IntlPull helps.
Configuration Complexity
Many options and strategies to configure. Getting the right setup for your use case takes research.
Nuxt 3 Migration
Nuxt 3 module differs from Nuxt 2. Migration requires understanding new patterns.
Route Strategy Decision
Choose between prefix, prefix_except_default, prefix_and_default. Each has trade-offs.
@nuxtjs/i18n Features
Why @nuxtjs/i18n is a great choice for Nuxt localization.
Automatic Routing
Locale-prefixed routes generated automatically. /about becomes /es/about. No manual route setup.
vs manual route configuration
SSR/SSG Support
Full server-side rendering support. Works with Nuxt's hybrid rendering modes.
vs client-only i18n
SEO Optimized
Automatic hreflang tags. Locale-aware canonical URLs. Search engine friendly.
vs manual SEO setup
Lazy Loading
Load translations per-locale, per-page. Reduce initial bundle size significantly.
vs loading all upfront
Browser Detection
Detect user language from Accept-Language header or navigator. Automatic redirects.
vs manual detection
Vue I18n Integration
Built on vue-i18n. All vue-i18n features available. Familiar API.
vs custom solutions
Quick Setup
Get @nuxtjs/i18n running in your Nuxt project.
Install Module
Add @nuxtjs/i18n to your Nuxt 3 project.
npx nuxi module add @nuxtjs/i18nConfigure nuxt.config
Set up i18n module options.
export default defineNuxtConfig({
modules: ['@nuxtjs/i18n'],
i18n: {
locales: [
{ code: 'en', name: 'English', file: 'en.json' },
{ code: 'es', name: 'Espanol', file: 'es.json' },
{ code: 'fr', name: 'Francais', file: 'fr.json' }
],
defaultLocale: 'en',
lazy: true,
langDir: 'locales/',
strategy: 'prefix_except_default'
}
});Create Locale Files
Add translation files in the locales directory.
// locales/en.json
{
"welcome": "Welcome to our site",
"about": "About Us",
"contact": "Contact"
}Use in Components
Access translations with useI18n or $t.
<script setup>
const { t, locale, locales, setLocale } = useI18n();
</script>
<template>
<h1>{{ t('welcome') }}</h1>
<select @change="setLocale($event.target.value)">
<option
v-for="loc in locales"
:key="loc.code"
:value="loc.code"
:selected="loc.code === locale"
>
{{ loc.name }}
</option>
</select>
</template>IntlPull Integration
Connect IntlPull to manage translations professionally.
Install IntlPull CLI
Add the CLI for translation management.
npm install -D @intlpull/cliConfigure intlpull.json
Set up the project configuration.
{
"projectId": "your-project-id",
"format": "json",
"sourceLocale": "en",
"localesDir": "./locales",
"filePattern": "{locale}.json"
}Sync Translations
Pull and push translations.
# Pull latest translations
npx intlpull pull
# Push new source strings
npx intlpull push --source ./locales/en.jsonAdd Build Step
Integrate with your build process.
// package.json
{
"scripts": {
"i18n:pull": "intlpull pull",
"i18n:push": "intlpull push --source ./locales/en.json",
"build": "npm run i18n:pull && nuxt build"
}
}Frequently Asked Questions
Related Guides
Next.js Localization with next-intl
Complete guide to Next.js App Router localization with next-intl. Server components, routing, metadata, and IntlPull integration.
Vue.js Localization with vue-i18n
Complete guide to Vue 3 localization with vue-i18n. Composition API, lazy loading, and IntlPull integration for production i18n.