Internationalization and localization in Vue apps are primarily handled using the Vue I18n plugin. 1. Install vue-i18n via npm or yarn. 2. Create locale JSON files (e.g., en.json, es.json) for translation messages. 3. Set up the i18n instance in main.js with locale configuration and message files. 4. Access translations in templates using $t('key'). 5. Manage translation keys consistently and avoid deep nesting for scalability. 6. Dynamically switch languages by updating the locale property at runtime. 7. Persist selected language in local storage for user preference retention. 8. Use dynamic values in translations with variable injection like $t('helloUser', { name: 'Alice' }). 9. Implement pluralization rules in i18n config and use $tc() for proper plural handling. 10. For advanced needs like RTL support or date formatting, integrate libraries like Intl or date-fns to ensure full localization coverage.

Internationalization (i18n) and localization (l10n) in a Vue app mainly come down to two things: switching content based on the user's language preference and making sure that text, dates, numbers, and other locale-specific elements display correctly. The most common and powerful way to do this is by using Vue I18n, a plugin specifically built for Vue apps.

Setting up Vue I18n

To get started, install vue-i18n via npm or yarn:

npm install vue-i18n@9

Once installed, create a locale messages file (like en.json, es.json, etc.) and set up the i18n instance in your app entry point (main.js or similar):

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

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

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

Now you can access translations anywhere in your templates using $t('key').

Managing translation files effectively

Instead of hardcoding strings directly into components, keep them in structured JSON files like:

en.json

{
  "welcome": "Welcome!",
  "button": {
    "submit": "Submit"
  }
}

es.json

{
  "welcome": "?Bienvenido!",
  "button": {
    "submit": "Enviar"
  }
}

This makes it easier to maintain and scale as your app grows. You can also use tools like POEditor or Crowdin to help manage translations if working with multiple languages or teams.

A few tips:

• Keep keys consistent across locales.
• Avoid deeply nested structures unless necessary — they can get messy fast.
• Use comments in separate files or tools if your team includes non-developers.

Switching languages dynamically

Changing the app’s language at runtime is simple. Just update the locale property on the i18n instance:

import { useI18n } from 'vue-i18n'

export default {
  setup() {
    const { locale } = useI18n()

    function changeLang(newLang) {
      locale.value = newLang
    }

    return { locale, changeLang }
  }
}

In your template:

<button @click="changeLang('es')">Espa?ol</button>

This will instantly switch all localized text in your app. You can also persist the selected language in local storage so users don’t have to switch every time they visit.

Handling dynamic and pluralized content

Sometimes you need to inject variables into translated strings or handle pluralization. Vue I18n supports both:

Using dynamic values:

In your JSON:

"helloUser": "Hello, {name}!"

In your component:

<p>{{ $t('helloUser', { name: 'Alice' }) }}</p>

Pluralization:

Set up plural rules in your i18n config:

const i18n = createI18n({
  legacy: false,
  locale: 'en',
  fallbackLocale: 'en',
  pluralRules: {
    en: (choice, choicesLength) => {
      if (choicesLength === 2) {
        return choice > 1 ? 1 : 0
      }
      return choice ? 1 : 0
    }
  },
  messages: {
    en,
    es
  }
})

Then in your JSON:

"itemsSelected": "You selected {count} item | You selected {count} items"

And in your template:

<p>{{ $tc('itemsSelected', itemCount, { count: itemCount }) }}</p>

This helps make your UI feel natural in different languages where plural rules vary.

That’s basically how i18n and l10n work in Vue. It’s not too complicated once you’ve got the structure in place, but it’s easy to overlook some edge cases like RTL languages, date formatting, or currency handling. For those, look into integrating with libraries like date-fns or Intl. But for most standard needs, Vue I18n covers it pretty well.

The above is the detailed content of How can internationalization (i18n) and localization (l10n) be implemented in a Vue application?. For more information, please follow other related articles on the PHP Chinese website!