vue-i18n

Internationalization plugin for Vue 3 — translate messages, format dates and numbers, and switch locales at runtime.

vue-i18n

Vue

Internationalization plugin for Vue 3 — translate messages, format dates and numbers, and switch locales at runtime.

npmGitHubDocs

Fit

Bundle (gzip)

19.5 kB

58.2 kB raw

Install size includes transitive dependencies. Bundle size is gzipped browser payload.

Freshness

The Problem

Adding multi-language support to a Vue app requires loading translation strings, formatting locale-specific dates and numbers, handling plurals and gender, and switching languages without a full page reload.

What It Does

Vue I18n provides a $t() function and useI18n() composable for translating messages in templates and script code. It supports ICU message format for complex plurals, $d() for locale-aware date formatting, and lazy locale loading for large translation files.

Installation

bash
npm install vue-i18n

Usage Example

typescript
import { createI18n } from 'vue-i18n';

const i18n = createI18n({
  locale: 'en',
  fallbackLocale: 'en',
  messages: {
    en: { greeting: 'Hello, {name}!', items: '{count} item | {count} items' },
    de: { greeting: 'Hallo, {name}!', items: '{count} Artikel | {count} Artikel' },
  },
});

app.use(i18n);
html
<template>
  <p>{{ $t('greeting', { name: 'Alice' }) }}</p>
  <p>{{ $t('items', { count: 3 }, 3) }}</p>
  <button @click="$i18n.locale = 'de'">Switch to German</button>
</template>

Related packages

element-plusVue

A complete component library for Vue 3 with a clean, desktop-oriented design system.

floating-vueVue

Tooltip, popover, and dropdown directives for Vue 3 — powered by Floating UI with automatic placement and overflow detection.

naive-uiVue

Fairly complete Vue 3 UI component library — 90+ components with a TypeScript-first design and no dependency on legacy CSS frameworks.

piniaVue

The intuitive, type-safe, and lightweight state management store for Vue — the official successor to Vuex.

@tanstack/vue-queryVue

Powerful async state management for Vue — data fetching, caching, background refetching, and server state synchronization.