Vue-i18n + Locize
The de-facto Vue 3 internationalization library — paired with Locize for cloud translation management, AI translation, and CDN delivery.
Vue-i18n is the canonical internationalization library for Vue. It provides the createI18n factory, the $t translation function (and useI18n composable for Vue 3 Composition API), the <i18n-t> component for slot interpolation, and Vue-i18n's own message syntax with named, list, and indexed interpolation, plus built-in pluralization. The current line is v11.x (with v9 and v10 in maintenance mode after July 2025).
Locize natively supports the vue-i18n format at the platform level — pluralization is handled within the message value (no separate _one / _other keys), named and list interpolation render correctly in the editor, and linked messages work as expected. The integration uses the locizer client to load translation messages and pipe them into Vue-i18n via setLocaleMessage.
- Library: vue-i18n (intlify org)
- Current version: v11.x (v9 and v10 maintenance-only)
- Format: vue-i18n syntax (handled by Locize's
format-vue-i18npackage) - Vue compatibility: Vue 3 (v9+) — Vue 2 is end-of-life (Dec 2023)
- Example repo: locizer/example/vue
- Best for: Vue 3 projects that want the Vue-native i18n experience and Vue-i18n message syntax
How Vue-i18n works in your code
The Vue 3 Composition API usage — call useI18n inside <script setup> and bind t() in the template.
<script setup>
import { useI18n } from 'vue-i18n'
const { t } = useI18n()
</script>
<template>
<h1>{{ t('greeting', { name: 'World' }) }}</h1>
</template>Connecting Vue-i18n to Locize
Initialize locizer, create a Vue-i18n instance via createI18n, then load all locales from Locize and apply them via setLocaleMessage.
1. The i18n / locizer setup
// src/i18n.js
import { createI18n } from 'vue-i18n'
import locizer from 'locizer'
const namespace = 'messages'
const apiKey = undefined // 'my-api-key' — set in dev for handleMissing
locizer.init({
projectId: '[your-project-id]',
apiKey
})
export const i18n = createI18n({
locale: locizer.lng, // active locale from locizer
fallbackLocale: 'en'
})
// Called from within the setup hook in your root component
export const loadMessagesPromise = new Promise((resolve, reject) => {
locizer.loadAll(namespace, (err, messages) => {
if (err) return reject(err)
Object.keys(messages).forEach((locale) => {
i18n.global.setLocaleMessage(locale, messages[locale])
})
resolve(messages)
})
})
export function handleMissing (locale, key) {
if (!apiKey) return
if (locale !== locizer.referenceLng) return
locizer.add(namespace, key, key)
}2. Mount the i18n plugin
// src/main.js
import { createApp } from 'vue'
import { i18n } from './i18n'
import App from './App.vue'
createApp(App).use(i18n).mount('#app')In your root App.vue, await loadMessagesPromise inside the setup hook (typically wrapped in a Suspense boundary) so translations are ready before the app renders. The full working example — including a Suspenser.vue wrapper — lives at locizer/example/vue.
Translation updates from Locize ship to your running app via the CDN without a rebuild — the same continuous localization model i18next users get, with Vue-i18n as the runtime layer. For more on Vue-i18n patterns and workflow tips, see Give Vue-i18n more superpowers.
Frequently asked questions
Vue-i18n is the de-facto internationalization library for Vue 2 and Vue 3. It provides the `createI18n` factory, the `$t` translation function, and Vue-i18n's own message format with named, list, and indexed interpolation, plus built-in pluralization. The current line is v11.x (released 2025), with v9 and v10 in maintenance mode after July 2025. Note: the legacy API is deprecated in v11 and will be dropped in v12; the Composition API is the recommended path for new Vue 3 projects.
Yes. Locize natively supports the vue-i18n message format at the platform level — including pluralization handled within the format value (no separate _one / _other keys), named interpolation, and linked messages. Translators see vue-i18n's syntax directly in the editor. The integration uses the locizer client: a small JavaScript module that loads translation messages from Locize and feeds them into Vue-i18n's `createI18n` instance via `setLocaleMessage`.
Initialize locizer with your Locize project id, create a Vue-i18n instance via `createI18n` with the active locale (locizer.lng), then load all locales from Locize via `locizer.loadAll(namespace, callback)` and apply each one with `i18n.global.setLocaleMessage(locale, messages)`. Optionally implement a `handleMissing` callback that calls `locizer.add` to push newly-encountered keys back to Locize during development. A complete working example lives at github.com/locize/locizer/tree/master/example/vue.
Yes. The locizer client is framework-agnostic JavaScript — it works with any Vue version. For Vue 3, use `createI18n` from vue-i18n v9+. For Vue 2, use the older Vue-i18n v8 with Vue.use(VueI18n). The integration pattern is the same: load translations via locizer, hand them to your Vue-i18n instance. Note that Vue 2 reached end-of-life in December 2023, so new projects should use Vue 3 + Vue-i18n v11.
Vue-i18n is the canonical Vue internationalization library — written specifically for Vue, with Vue-idiomatic APIs (the `$t` global, the `useI18n` composable, the `<i18n-t>` component for slot interpolation). i18next can also be used with Vue (via custom plugins like vue-i18next), but Vue-i18n is the deeper, more mature option in the Vue ecosystem. Pick Vue-i18n when you want the most Vue-native experience; pick i18next when you want maximum Locize integration depth and i18next-specific features (saveMissing, in-context editing via subliminal, multi-framework code sharing).
Yes — through Vue-i18n's `missing` handler combined with locizer's `add` function. Configure Vue-i18n to call your missing handler when a key is not found; in the handler, check that the locale is the reference language (typically `en`) and call `locizer.add(namespace, key, key)` to push the new key to Locize. This mirrors i18next's `saveMissing` flow. The locizer Vue example demonstrates this pattern.