Nugsoft Developer Guides

Internationalization (i18n) in Vue 3

Internationalization enables your app to support multiple languages and regions. Vue 3 projects typically use vue-i18n for i18n.

Setup

Install vue-i18n: npm install vue-i18n

Configure in main.js or main.ts:

import { createI18n } from 'vue-i18n'
const messages = {
en: { welcome: 'Welcome' },
fr: { welcome: 'Bienvenue' }
}
const i18n = createI18n({
locale: 'en',
fallbackLocale: 'en',
messages
})
app.use(i18n)

Best Practices

Store messages in separate JSON files per language (e.g., locales/en.json, locales/fr.json).
Use short, descriptive keys for messages.
Avoid hardcoding text in components; use $t('key') for translations.
Provide fallback languages for missing translations.

Locale Detection

Detect user locale from browser settings or user profile.
Allow users to switch languages via UI controls.

Example: Using Translations in Components

<template>
  <h1>{{ $t('welcome') }}</h1>
</template>

Fallback Strategies

Set fallbackLocale in i18n config.
Log missing translations for review.

References