Vue I18n 日本語ドキュメント

日本語

English
简体中文
Español
Français
Русский

日本語

English
简体中文
Español
Français
Русский

Appearance

Vue I18n の小規模サブセット ​

petite-vue-i18n は Vue I18n の代替配布版であり、最小限の機能のみを提供します。

Vue I18n との違いは何ですか？ ​

  • パッケージサイズが vue-i18n より小さい
    • CDN またはバンドラを使わない場合
      • パッケージの軽量化: ランタイム + コンパイラ ~32%、ランタイムのみ ~45%
      • petite-vue-i18n: ランタイム + コンパイラ ~9.61KB、ランタイムのみ ~5.51KB（本番ビルド、brotli 圧縮）
      • vue-i18n: ランタイム + コンパイラ ~14.18KB、ランタイムのみ ~10.12KB（本番ビルド、brotli 圧縮）
    • ブラウザ用 ES モジュール
      • パッケージの軽量化: ランタイム + コンパイラ ~32%、ランタイムのみ ~45%
      • petite-vue-i18n: ランタイム + コンパイラ ~10.51KB、ランタイムのみ ~6.20KB（本番ビルド、brotli 圧縮）
      • vue-i18n: ランタイム + コンパイラ ~15.40KB、ランタイムのみ ~11.12KB（本番ビルド、brotli 圧縮）
    • アプリケーションバンドルサイズ
      • vue-i18n からのサイズ削減: ~10%（vue-i18n と petite-vue-i18n のコードサイズチェック測定結果）
  • 旧バージョンの API はサポートされていません。コンポジション API のみ
  • 時刻フォーマット、数値フォーマットおよびユーティリティに関する API は含まれません。翻訳のみ
    • n, $n
    • d, $d
    • rt, $rt
    • tm, $tm
    • getDateTimeFormat, setDateTimeFormat, mergeDateTimeFormat
    • getNumberFormat, setNumberFormat, mergeNumberFormat
  • 処理できるロケールメッセージは単純なキーと値のみです。階層型のロケールメッセージを処理したい場合は、API を使用してカスタマイズする必要があります
  • ロケールフォールバックアルゴリズムは fallbackLocale に指定された配列順序に従います
  • カスタムディレクティブ v-t は含まれていません
  • vue-i18n によって提供される以下のコンポーネントは含まれていません
    • 翻訳 i18n-t
    • 時刻形式 i18n-d
    • 数値形式 i18n-n

petite-vue-i18n の使用例 ​

vue-i18n には翻訳、日時形式、数値形式などのさまざまな国際化機能が含まれています。一部のプロジェクトでは翻訳のみを使用し、日時形式は使用しないことがあります。現在のところ、そのような場合でもその機能のコードは含まれています。

プロジェクトで翻訳に t または $t API のみを使用している場合、vue-i18n よりも petite-vue-i18n を使用することをお勧めします。また、プロジェクトで vue-i18n の機能が必要な場合は、petite-vue-i18n から vue-i18n へのスムーズな移行が可能です。これはプログレッシブエンハンスメントを意味します。

インストール ​

基本的には vue-i18n をインストールするのと同じです。唯一の違いは、URL の一部またはパスの一部を vue-i18n から petite-vue-i18n に変更する点です。

CDN ​

次のスクリプトを <head> の最後に挿入する必要があります：

html
<script src="https://unpkg.com/vue@next"></script>
<script src="https://unpkg.com/petite-vue-i18n"></script>

スクリプト付きのアプリケーションコードは以下の通りです：

html
<script>
const { createApp } = Vue
const { createI18n } = PetiteVueI18n

const i18n = createI18n({
  // vue-i18n のオプションをここに追加...
})

const app = createApp({
  // vue のオプションをここに追加...
})

app.use(i18n)
app.mount('#app')
</script>

パッケージマネージャー ​

sh
npm install petite-vue-i18n@next --save
sh
yarn add petite-vue-i18n@next
sh
pnpm add petite-vue-i18n@next
js
import { createApp } from 'vue'
import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  // vue-i18n のオプションをここに追加...
})

const app = createApp({
  // vue のオプションをここに追加...
})

app.use(i18n)
app.mount('#app')

使用方法 ​

ハローワールド ​

テンプレート:

html
<div id="app">
  <h1>{{ t('hello world') }}</h1>
</div>

スクリプト:

js
const { createApp } = Vue
const { createI18n, useI18n } = PetiteVueI18n
// ES モジュールの場合
// import { createApp } from 'vue'
// import { createI18n } from 'petite-vue-i18n'

const i18n = createI18n({
  locale: 'en',
  messages: {
    en: {
      'hello world': 'Hello world!'
    },
    ja: {
      'hello world': 'こんにちは、世界！'
    }
  }
})

// App コンポーネントを定義
const App = {
  setup() {
    const { t } = useI18n()
    return { t }
  }
}

const app = createApp(App)

app.use(i18n)
app.mount('#app')

vue-i18n と同じメッセージリゾルバーとロケールフォールバックを使用する ​

petite-vue-i18n では、メッセージリゾルバーとロケールフォールバックにはコードサイズを最適化するために単純な実装が使用されています。これは 違いのセクション で説明されている通りです：

  • メッセージリゾルバー
    • キーと値のスタイルのロケールメッセージを解決します
    • 実装については こちら を参照してください
  • ロケールフォールバック
    • fallbackLocale に指定された配列順序に従ってフォールバックします
    • 単純な文字列ロケールが指定された場合は、そのロケールにフォールバックします
    • 実装については こちら を参照してください

vue-i18n と同じメッセージリゾルバーとロケールフォールバックを使用したい場合は、API を使用してそれらを変更できます。

このとき、vite や webpack のようなバンドラのみがサポートされることに注意してください。

プロジェクトに @intlify/core-base をパッケージマネージャーでインストールする必要があります。

sh
npm install --save @intlify/core-base@next
sh
yarn add @intlify/core-base@next
sh
pnpm add @intlify/core-base@next

次に、アプリケーションのエントリーポイントで、API を使用してメッセージリゾルバーとロケールフォールバックを設定します：

js
import { createApp } from 'vue'
import {
  createI18n,
  registerMessageResolver, // メッセージリゾルバー API を登録
  registerLocaleFallbacker, // ロケールフォールバック API を登録
} from 'petite-vue-i18n'
import {
  resolveValue, // デフォルトで使用される vue-i18n のメッセージリゾルバー
  fallbackWithLocaleChain // デフォルトで使用される vue-i18n のロケールフォールバック
} from '@intlify/core-base'

// vue-i18n のメッセージリゾルバーを登録
registerMessageResolver(resolveValue)

// vue-i18n のロケールフォールバックを登録
registerLocaleFallbacker(fallbackWithLocaleChain)

// 他のコード...
// ...

上記の設定により、ロケールメッセージの解決とロケールフォールバックは vue-i18n と同じ方法で処理されます。ただし、コードサイズはわずかに増加することに注意してください。

バンドラープラグインの設定 ​

vite のようなビルドツールチェーンを使用してアプリケーションを構築する場合は、それを設定する必要があります。 @intlify/unplugin-vue-i18n の設定で 「module」オプション を次のように設定してください。

NOTE

@intlify/unplugin-vue-i18n の設定については、'performance' セクション および @intlify/unplugin-vue-i18n ドキュメント を参照してください

IMPORTANT

@intlify/unplugin-vue-i18n のバージョンは 5.1.0 以降である必要があります

diff
 // vite.config.ts
 import { defineConfig } from 'vite'
 import { resolve, dirname } from 'node:path'
 import { fileURLToPath } from 'url'
 import VueI18nPlugin from '@intlify/unplugin-vue-i18n/vite'

 export default defineConfig({
   /* ... */
   plugins: [
     /* ... */
     VueI18nPlugin({
       /* オプション */
 +      module: 'petite-vue-i18n',
       // ロケールメッセージリソースの事前コンパイルオプション
       include: resolve(dirname(fileURLToPath(import.meta.url)), './path/to/src/locales/**'),
     }),
   ],
 })

インポートIDを変更せずに切り替える ​

npm のエイリアスを使用して、インポートIDを変更せずに vue-i18n から petite-vue-i18n に切り替えることができます。

package.json:

diff
 {
   // ...
   "dependencies": {
     "vue": "^3.4.14",
 -     "vue-i18n": "^10.0.0"
 +     "vue-i18n": "npm:petite-vue-i18n@^10.0.0"
   },
 }

アプリケーションをビルドするには @intlify/unplugin-vue-i18n が必要です。

Copyright © 2026-present allyouneed.tools