Back to Blog

Vue.js i18n Setup: Easy Internationalization for Vue Applications

Learn how to implement Vue.js internationalization (i18n) with Vue I18n and i18next. Complete setup guide with examples, best practices, and automated translation workflows.

Posted by

Vue.js internationalization guide

Table of Contents

Vue.js Internationalization Overview

Vue.js internationalization (i18n) enables your application to support multiple languages and locales seamlessly. With the global nature of web applications, implementing i18n is crucial for reaching international audiences and providing localized user experiences.

Vue.js offers two primary approaches for internationalization: the official Vue I18n plugin and the popular i18next library integration. This guide covers both approaches, helping you choose the best solution for your Vue.js project.

Setting Up Vue I18n

Vue I18n is the official internationalization plugin for Vue.js applications. Here's how to set it up:

Installation

npm install vue-i18n@9 # or for Vue 2: npm install vue-i18n@8

Basic Configuration

Create your i18n configuration file (src/i18n/index.js):

import { createI18n } from 'vue-i18n'
import en from './locales/en.json'
import es from './locales/es.json'
import fr from './locales/fr.json'

const messages = {
  en,
  es,
  fr
}

const i18n = createI18n({
  locale: 'en', // default locale
  fallbackLocale: 'en',
  messages,
  legacy: false, // Vue 3 Composition API mode
})

export default i18n

Vue App Integration

import { createApp } from 'vue'
import App from './App.vue'
import i18n from './i18n'

const app = createApp(App)
app.use(i18n)
app.mount('#app')

Translation Files Structure

Create language-specific JSON files in src/i18n/locales/:

// en.json
{
  "nav": {
    "home": "Home",
    "about": "About",
    "contact": "Contact"
  },
  "user": {
    "welcome": "Welcome, {name}!",
    "profile": "User Profile",
    "settings": "Account Settings"
  },
  "common": {
    "save": "Save",
    "cancel": "Cancel",
    "loading": "Loading..."
  }
}

Using Translations in Components

<template>
  <div>
    <h1>{{ $t('nav.home') }}</h1>
    <p>{{ $t('user.welcome', { name: userName }) }}</p>
    
    <select @change="changeLanguage($event.target.value)">
      <option value="en">English</option>
      <option value="es">Español</option>
      <option value="fr">Français</option>
    </select>
  </div>
</template>

<script setup>
import { useI18n } from 'vue-i18n'
import { ref } from 'vue'

const { t, locale } = useI18n()
const userName = ref('John')

const changeLanguage = (lang) => {
  locale.value = lang
}
</script>

Using i18next with Vue.js

For projects requiring more advanced features or consistency with other frameworks, i18next offers a powerful alternative to Vue I18n:

i18next Vue.js Setup

npm install i18next vue-i18next i18next-http-backend i18next-browser-languagedetector
import i18n from 'i18next'
import I18NextVue from 'i18next-vue'
import Backend from 'i18next-http-backend'
import LanguageDetector from 'i18next-browser-languagedetector'

i18n
  .use(Backend)
  .use(LanguageDetector)
  .init({
    fallbackLng: 'en',
    debug: process.env.NODE_ENV === 'development',
    backend: {
      loadPath: '/locales/{{lng}}/{{ns}}.json',
    },
    detection: {
      order: ['localStorage', 'navigator'],
    },
  })

const app = createApp(App)
app.use(I18NextVue, { i18next: i18n })
app.mount('#app')

Benefits of i18next with Vue.js

  • Framework Agnostic: Consistent API across React, Angular, and Vue.js
  • Advanced Features: Namespaces, pluralization, and interpolation
  • Ecosystem: Rich plugin ecosystem and tooling
  • Backend Integration: Seamless server-side rendering support

Advanced Message Formatting

Both Vue I18n and i18next support advanced formatting features for complex translation scenarios:

Pluralization

// Vue I18n pluralization
{
  "item": "no items | one item | {count} items"
}

// Usage: $t('item', count)

Date and Number Formatting

// Vue I18n number formatting
const i18n = createI18n({
  numberFormats: {
    'en': {
      currency: {
        style: 'currency',
        currency: 'USD'
      }
    },
    'es': {
      currency: {
        style: 'currency',
        currency: 'EUR'
      }
    }
  }
})

// Usage: $n(1234.56, 'currency')

Component Interpolation

<template>
  <i18n-t keypath="terms" tag="p">
    <template #link>
      <router-link to="/terms">{{ $t('termsLink') }}</router-link>
    </template>
  </i18n-t>
</template>

// Translation: "By signing up, you agree to our {link}"

Lazy Loading Translations

For large applications, lazy loading translations improves initial load times:

// Dynamic import function
const loadLocaleMessages = async (locale) => {
  const messages = await import(`./locales/${locale}.json`)
  return messages.default
}

// Load and set locale
const setLocale = async (locale) => {
  if (!i18n.global.availableLocales.includes(locale)) {
    const messages = await loadLocaleMessages(locale)
    i18n.global.setLocaleMessage(locale, messages)
  }
  i18n.global.locale.value = locale
}

Automated Translation Generation

Creating translations for multiple languages manually is time-consuming. i18nowAI streamlines this process by automatically generating high-quality translations for your Vue.js applications.

i18nowAI Integration Workflow

  • Export your base language JSON file (typically English)
  • Upload to i18nowAI
  • Select target languages from 30+ available options
  • Download professionally translated JSON files
  • Integrate into your Vue.js i18n setup

This approach works seamlessly with both Vue I18n and i18next, providing consistent, high-quality translations powered by DeepL's advanced AI translation engine.

Best Practices for Vue.js Internationalization

  • Key Naming: Use descriptive, hierarchical keys (e.g., 'user.profile.settings')
  • Default Values: Always provide fallback translations
  • Context: Include context information in translation keys when needed
  • Testing: Test all language variants thoroughly
  • Performance: Use lazy loading for large translation files
  • Accessibility: Ensure proper lang attributes and RTL support

Conclusion

Vue.js internationalization is essential for creating globally accessible applications. Whether you choose Vue I18n for its tight integration or i18next for its advanced features, both approaches provide robust solutions for multilingual Vue.js applications.

Combine your chosen i18n solution with i18nowAI's automated translation generation to dramatically reduce localization time and costs while maintaining professional quality across all supported languages.

For more Vue.js localization resources, check out our guides on automatic i18next JSON translation and React app localization strategies.