Prerequisites
- Vue 3 application
- Node.js 18+
- Vite or Vue CLI
Common Challenges
Problems developers face when localizing Vue apps—and how IntlPull helps.
Migration from v8 to v9
Significant API changes between Vue 2 (v8) and Vue 3 (v9). Migration requires code changes.
Bundle Size
Full library adds weight. Need to configure tree-shaking properly for production.
SSR Complexity
Server-side rendering requires careful setup. Nuxt users should use @nuxtjs/i18n instead.
vue-i18n Features
Why vue-i18n is a great choice for Vue localization.
Composition API
useI18n() composable for Vue 3. Reactive locale state. Tree-shakeable exports.
vs Options API only
Reactive Translations
Translations update automatically when locale changes. No manual re-renders needed.
vs imperative updates
Component Interpolation
Embed Vue components in translations. Rich text with interactive elements.
vs text-only interpolation
Datetime & Number
Built-in formatters for dates, times, numbers, and currencies. Locale-aware.
vs external libraries
Local Scope
Component-scoped translations. Override global messages per component.
vs global-only scope
Dev Tools
Vue DevTools integration. Inspect translations, missing keys, and locale state.
vs blind debugging
Quick Setup
Get vue-i18n running in your Vue project.
Install vue-i18n
Add vue-i18n to your Vue 3 project.
npm install vue-i18n@9Create i18n Instance
Configure the i18n plugin.
import { createI18n } from 'vue-i18n';
const messages = {
en: {
hello: 'Hello World',
greeting: 'Hello, {name}!'
},
es: {
hello: 'Hola Mundo',
greeting: 'Hola, {name}!'
}
};
const i18n = createI18n({
locale: 'en',
fallbackLocale: 'en',
messages,
});
export default i18n;Register Plugin
Add i18n to your Vue app.
import { createApp } from 'vue';
import App from './App.vue';
import i18n from './i18n';
const app = createApp(App);
app.use(i18n);
app.mount('#app');Use in Components
Access translations with useI18n or $t.
<script setup lang="ts">
import { useI18n } from 'vue-i18n';
const { t, locale } = useI18n();
</script>
<template>
<h1>{{ t('hello') }}</h1>
<p>{{ t('greeting', { name: 'Vue' }) }}</p>
<select v-model="locale">
<option value="en">English</option>
<option value="es">Espanol</option>
</select>
</template>IntlPull Integration
Connect IntlPull to manage translations professionally.
Install IntlPull CLI
Add the CLI for translation management.
npm install -D @intlpull/cliExtract Messages
Extract translation keys from your codebase.
npx intlpull extract --pattern 'src/**/*.vue' --output ./locales/en.jsonPull Translations
Download translations from IntlPull.
npx intlpull pull --format json --output ./src/localesConfigure Lazy Loading
Load translations dynamically.
import { createI18n } from 'vue-i18n';
const i18n = createI18n({
locale: 'en',
fallbackLocale: 'en',
messages: {}, // Start empty
});
export async function loadLocaleMessages(locale: string) {
const messages = await import(`./locales/${locale}.json`);
i18n.global.setLocaleMessage(locale, messages.default);
i18n.global.locale.value = locale;
}
export default i18n;Frequently Asked Questions
Related Guides
React i18next Localization Guide
Complete guide to React localization with react-i18next. Setup, lazy loading, namespaces, SSR, and IntlPull integration for production i18n.
Nuxt.js Localization Guide
Complete guide to Nuxt 3 localization with @nuxtjs/i18n. SSR, hybrid rendering, SEO, and IntlPull integration.