vite-vue-internationalization
SFCカスタムブロック と インライン化チャンク で、Vite + Vueアプリの国際化を簡単にしましょう！
VVI は vite-vue-internationalization の略称です。
VVI は Vite 8 以降を対象にしています。ビルドは Vite の Rolldown ベースのパイプラインで動作し、Node.js ^20.19.0 || >=22.12.0 が必要です。
特長 / Features
SFC カスタムブロック
Vue SFC の <locale> カスタムブロックで翻訳辞書を定義します。$locale.sfc および $l.sfc から読み出すことができます。
vue
<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>インライン化チャンク
各チャンクにメッセージを埋め込み、可能な箇所はテキストに置き換え、各言語ごとに個別ファイルを出力します。
2つのメッセージ構文
Vue I18n 互換構文（vue）と ICU メッセージ構文（icu）に対応します。
TypeScript 型対応
プライマリ言語の辞書に基づいて、Vue Language Tools / Volar によってTypeScript型を注入します。
vue-tscでの型検査、Vue公式 VS Code 拡張機能での型注釈に対応します。
ドキュメント
- はじめる: Vite プラグイン、型定義、Vue アプリへの導入、SFC メッセージの最小セットアップ
- 設定:
primaryLocale、global、messageSyntax、buildStrategy、scan、sfcTransformの指定 - メッセージ定義:
<locale>ブロック、グローバル辞書（env/global）、単体メッセージ SFC、スクリプト定義メッセージ - メッセージ構文: Vue I18n 互換構文（
vue）と ICU メッセージ構文（icu）の違い - ビルド戦略: 仮想モジュール（
virtual）とインライン化チャンク（inline-chunks）の使い分け - バックエンド HTML 描画: Cloudflare Workers などの Vite SSR 環境で Vue を HTML 文字列に描画する
- API リファレンス: JSDoc から生成した API リファレンス
リンク
Examples
関連する外部ドキュメント:
まずは はじめる から進めてください。