vite-vue-internationalization

A Vite plugin for typed Vue SFC translations with SFC custom blocks and inline locale chunks.

VVI is the short name for vite-vue-internationalization.

VVI targets Vite 8 and newer. Builds run on Vite's Rolldown-based pipeline and require Node.js ^20.19.0 || >=22.12.0.

Features

SFC Custom Blocks

Define translation dictionaries in Vue SFC <locale> custom blocks.
Read them through $locale.sfc and $l.sfc.

<template>
  <h1>{{ $locale.sfc.title }}</h1>
  <p>{{ $l.sfc.count({ n: 3 }) }}</p>
</template>

<locale locale="ja-JP" lang="yaml">
title: りんご
count: "{n} 個のりんご"
</locale>

<locale locale="en-US" lang="yaml">
title: apple
count: "an apple | {n} apples"
</locale>

Inline Chunks

Embed messages into each chunk, replace static access with text where possible, and emit per-locale files.

Two Message Syntaxes

Supports Vue I18n compatible syntax (vue) and ICU message syntax (icu).

TypeScript Types

Injects TypeScript types into Vue Language Tools / Volar based on the primary locale dictionary.
This supports type checking in vue-tsc and type annotations in the official Vue VS Code extension.

Documentation

• Getting Started: Vite plugin, type declarations, app installation, and SFC messages
• Configuration: primaryLocale, global, messageSyntax, buildStrategy, scan, and sfcTransform
• Messages: <locale> blocks, global dictionaries, locale-only SFCs, and script-defined messages
• Message Syntax: vue syntax and icu syntax
• Build Strategy: choosing between virtual and inline-chunks
• Backend HTML Rendering: render Vue to an HTML string in Vite SSR environments such as Cloudflare Workers
• API Reference: generated from English JSDoc comments

Links

• GitHub repository
• npm package
• GitHub Sponsors

Examples

• Open the Vue syntax example on StackBlitz
• Open the ICU syntax example on StackBlitz

Related external docs:

• Vue SFC custom blocks
• Vite plugin API
• Vue Language Tools
• TypeDoc

Start with Getting Started.