How to implement internationalization (i18n) in a Vue app?

Install Vue I18n: Vue 3 uses npm install vue-i18n@next, Vue 2 uses npm install vue-i18n; 2. Create language files such as en.json and es.json in the locales directory, supporting nested structures; 3. Create instances in Vue 3 through createI18n and mount them in main.js, Vue 2 through Vue.use(VueI18n) and instantiate VueI18n; 4. Use {{ $t('key') }} interpolation in the template, use useI18n's t function in the Vue 3 Composition API, use this.$t in the Vue 2 Options API; 5. Use this.$i18n.locale = lang (Vue 2) or i18n.global.locale.value = lang (Vue 3) to realize runtime language switching; 6. Optionally, lazy loading of translation files is achieved through dynamic import to optimize performance; 7. The user's browser language can be detected through navigator.language and automatically set locale; through the above steps, multi-language support for Vue applications can be fully realized.

Implementing internationalization (i18n) in a Vue app is straightforward with the help of Vue I18n , the official internationalization plugin. Here's how to set it up step by step for both Vue 3 and Vue 2.

✅ Step 1: Install Vue I18n

For Vue 3 (use Vue I18n v9):

 npm install vue-i18n@next

For Vue 2 (use Vue I18n v8):

 npm install vue-i18n

✅ Step 2: Prepare Language Files

Create a folder (eg, locales ) to store translation files.

Example: locales/en.json

 {
  "greeting": "Hello!",
  "description": "Welcome to our application."
}

Example: locales/es.json

 {
  "greeting": "¡Hola!",
  "description": "Bienvenido a nuestra aplicación."
}

You can also support nested structures:

 {
  "home": {
    "title": "Home Page",
    "welcome": "Welcome, {name}!"
  }
}

✅ Step 3: Set Up i18n in Your App

For Vue 3 (Composition API):

Create i18n.js or i18n/index.js :

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

const messages = {
  en,
  es
}

const i18n = createI18n({
  locale: 'en', // default locale
  fallbackLocale: 'en',
  messages
})

export default i18n

Then, in your main.js :

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

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

For Vue 2 (Options API):

In main.js :

 import Vue from 'vue'
import VueI18n from 'vue-i18n'
import en from './locales/en.json'
import es from './locales/es.json'

Vue.use(VueI18n)

const i18n = new VueI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: { en, es }
})

new Vue({
  i18n,
  render: h => h(App)
}).$mount('#app')

✅ Step 4: Use Translations in Components

In Templates:

 <template>
  <div>
    <p>{{ $t(&#39;greeting&#39;) }}</p>
    <p>{{ $t(&#39;description&#39;) }}</p>
    <p>{{ $t(&#39;home.welcome&#39;, { name: &#39;Alice&#39; }) }}</p>
  </div>
</template>

In JavaScript (Vue 3 Composition API):

 import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { t } = useI18n()
    console.log(t('greeting'))
    return { t }
  }
}

In Vue 2 Options API:

 export default {
  created() {
    console.log(this.$t('greeting'))
  }
}

✅ Step 5: Change Language at Runtime

Add a method to switch languages dynamically:

 // In a component
methods: {
  changeLocale(lang) {
    this.$i18n.locale = lang
  }
}

 <button @click="changeLocale(&#39;en&#39;)">English</button>
<button @click="changeLocale(&#39;es&#39;)">Español</button>

Note: In Vue 3 with createI18n , you may need to use i18n.global.locale.value = lang if using the global instance.

 import { i18n } from './i18n'
i18n.global.locale.value = 'es'

✅ Optional: Lazy Load Translations (for large apps)

To reduce bundle size, load translations on demand:

 const messages = {
  en: () => import('../locales/en.json'),
  es: () => import('../locales/es.json')
}

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages
})

Vue I18n will handle async loading automatically.

✅ Bonus: Detect User's Preferred Language

Use browser language detection:

 const userLang = navigator.language || navigator.userLanguage
const locale = userLang.startsWith('es') ? 'es' : 'en'
i18n.global.locale.value = locale

Summary

• Use vue-i18n for translations.
• Store translations in JSON files.
• Set up the i18n instance and plug it into Vue.
• Use $t() in templates and code.
• Change locale dynamically.
• Optionally lazy-load translations and detect browser language.

With this setup, your Vue app can support multiple languages cleanly and efficiently.

The above is the detailed content of How to implement internationalization (i18n) in a Vue app?. For more information, please follow other related articles on the PHP Chinese website!