Vue 2からの移行

`vue-i18n-bridge`

注意

Vue 2 の EOL により、vue-i18n-bridge は v10 では提供されません。v9.13 が最後のバージョンになります。

`vue-i18n-bridge`とは？

vue-i18n-bridgeは、[email protected]以降と[email protected]の間でアップグレードを可能な限り簡単にすることを目的としたブリッジです。

これは、[email protected]以降で既に構築されたVue 2アプリケーションで使用できます。

また、[email protected]からいくつかの機能がバックポートされています：

@vue/composition-apiとvue-demiによって動作するVue I18nコンポジションAPI
@intlify/message-compilerによって動作するメッセージ形式構文

インストール

パッケージマネージャー

npmyarnpnpm

npm install vue-i18n-bridge

yarn add vue-i18n-bridge

pnpm add vue-i18n-bridge

このライブラリを使用する前に以下のパッケージをインストールする必要があります：

vue-i18n: >= v8.26.1 < v9
vue-demi: >= v0.13.5
@vue/composition-api: >= v1.2.0 (Vue 2.6を使用する場合)

CDN

Vue 2.7の場合:

vue, vue-demiの後にvue-i18n-bridgeを含めるとインストールされます。

html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>

Vue 2.6の場合:

vue, @vue/composition-api, vue-demiの後にvue-i18n-bridgeを含めるとインストールされます。

html

<script src="https://cdn.jsdelivr.net/npm/[email protected]"></script>
<script src="https://unpkg.com/vue-i18n@8/dist/vue-i18n.min.js"></script>
<script src="https://cdn.jsdelivr.net/npm/@vue/[email protected]"></script>
<script src="https://unpkg.com/[email protected]/lib/index.iife.js"></script>
<script src="https://unpkg.com/[email protected]/dist/vue-i18n-bridge.global.prod.js"></script>

使用方法

コンポジションAPI

Vue 2.7の場合:

import Vue from 'vue'
import { createApp } from 'vue-demi'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueI18n, { bridge: true }) // vue-i18nをインストールする際には'{ bridge: true }'プラグインオプションを指定する必要があります

// `createI18n`オプションはvue-i18n（[email protected]）APIとほぼ同じです
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `vue-i18n-bridge`が提供する`createI18n`には2番目の引数があり、**必ず**`vue-i18n`が提供する`VueI18n`コンストラクタを渡す必要があります

const app = createApp({
 setup() {
  // `useI18n`オプションはvue-i18n（[email protected]）APIとほぼ同じです
  const { t, locale } = useI18n()
  // ... 何らかの処理

  return { t, locale }
 }
})

app.use(i18n) // `createI18n`で作成された`i18n`インスタンスをインストールする必要があります
app.mount('#app')

Vue 2.6の場合:

import Vue from 'vue'
import VueCompositionAPI, { createApp } from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // vue-i18nをインストールする際には'{ bridge: true }'プラグインオプションを指定する必要があります

// `createI18n`オプションはvue-i18n（[email protected]）APIとほぼ同じです
const i18n = createI18n({
  legacy: false,
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `vue-i18n-bridge`が提供する`createI18n`には2番目の引数があり、**必ず**`vue-i18n`が提供する`VueI18n`コンストラクタを渡す必要があります

const app = createApp({
 setup() {
  // `useI18n`オプションはvue-i18n（[email protected]）APIとほぼ同じです
  const { t, locale } = useI18n()
  // ... 何らかの処理

  return { t, locale }
 }
})

app.use(i18n) // `createI18n`で作成された`i18n`インスタンスをインストールする必要があります
app.mount('#app')

レガシーアプリケーションAPI

Vue 2.7の場合:

import Vue from 'vue'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueI18n, { bridge: true }) // vue-i18nをインストールする際には'{ bridge: true }'プラグインオプションを指定する必要があります

// `createI18n`オプションはvue-i18n（[email protected]）APIとほぼ同じです
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `vue-i18n-bridge`が提供する`createI18n`には2番目の引数があり、**必ず**`vue-i18n`が提供する`VueI18n`コンストラクタを渡す必要があります

Vue.use(i18n) // `createI18n`で作成された`i18n`インスタンスをインストールする必要があります

const app = new Vue({ i18n })
app.$mount('#app')

Vue 2.6の場合:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true }) // vue-i18nをインストールする際には'{ bridge: true }'プラグインオプションを指定する必要があります

// `createI18n`オプションはvue-i18n（[email protected]）APIとほぼ同じです
const i18n = createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n) // `vue-i18n-bridge`が提供する`createI18n`には2番目の引数があり、**必ず**`vue-i18n`が提供する`VueI18n`コンストラクタを渡す必要があります

Vue.use(i18n) // `createI18n`で作成された`i18n`インスタンスをインストールする必要があります

const app = new Vue({ i18n })
app.$mount('#app')

TypeScriptの場合:

import Vue from 'vue'
import VueCompositionAPI from '@vue/composition-api'
import { createI18n, useI18n, castToVueI18n } from 'vue-i18n-bridge'

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })

// `i18n`インスタンスをキャストする必要があります
const i18n = castToVueI18n(createI18n({
  locale: 'ja',
  messages: {
    en: {
      message: {
        hello: 'hello, {name}!'
      }
    },
    ja: {
      message: {
        hello: 'こんにちは、{name}！'
      }
    }
  }
}, VueI18n))

Vue.use(i18n)

const app = new Vue({ i18n })
app.$mount('#app')

ブラウザでのUMDモジュールの使用

Vue 2.7の場合

const { createApp } = VueDemi // `VueDemi`という名前でエクスポートされたUMD
const { createI18n, useI18n } = VueI18nBridge // `VueI18nBridge`という名前でエクスポートされたUMD

Vue.use(VueI18n, { bridge: true })

const i18n = createI18n({
  locale: 'ja',
  messages: {
    // ...
  }
}, VueI18n)

const app = createApp({}, {
  // ...
})
app.use(i18n)
app.mount('#app') // Vueアプリのホストコンテナ要素

Vue 2.6の場合

const { createApp } = VueCompositionAPI // `VueCompositionAPI`という名前でエクスポートされたUMD
const { createI18n, useI18n } = VueI18nBridge // `VueI18nBridge`という名前でエクスポートされたUMD

Vue.use(VueCompositionAPI)
Vue.use(VueI18n, { bridge: true })

const i18n = createI18n({
  locale: 'ja',
  messages: {
    // ...
  }
}, VueI18n)

const app = createApp({}, {
  // ...
})
app.use(i18n)
app.mount('#app') // Vueアプリのホストコンテナ要素

制限事項

レガシーアプリケーションAPIモードでは、vue-i18nから移植した際に新しいメッセージ形式構文を使用することはできません。
- コンポジションAPIモードでのみ使用可能です。
レガシーアプリケーションAPIモードでは、vue-i18nから移植した際に以下のコンポーネントは使用できません。
- 翻訳コンポーネント: <i18n-t>
- 日付形式コンポーネント: <i18n-d>
- 数値形式コンポーネント: <i18n-n>
コンポジションAPIモードでは、以下のAPIのプレフィックスには$がついており、グローバルスコープになります。
- $t
- $d
- $n

異なるビルドについての説明

npmパッケージのdist/ディレクトリには、vue-i18n-bridgeのさまざまなビルドがあります。用途に応じてどのdistファイルを使用すべきかの概要を示します。

CDNまたはバンドラーなしの場合

vue-i18n-bridge(.runtime).global(.prod).js:
- ブラウザで<script src="...">直接使用するためです。VueI18nBridgeグローバルを公開します。
- ブラウザでのメッセージ形式コンパイル:
  - vue-i18n-bridge.global.jsはコンパイラとランタイムの両方を含む「フル」ビルドで、メッセージ形式を即時コンパイルできます。
  - vue-i18n-bridge.runtime.global.jsはランタイムのみを含み、メッセージ形式をビルドステップで事前にコンパイルする必要があります。
- Vue I18nコア内部パッケージをすべてインライン化します。つまり、他のファイルへの依存関係がない単一のファイルです。これはすべてのコードの同じインスタンスを得るために、このファイルからのみすべてをインポートする必要があることを意味します。
- プロダクション/開発の分岐がハードコードされており、プロダクションビルドは事前に最小化されています。本番環境では*.prod.jsファイルを使用してください。

注意

グローバルビルドはUMDビルドではありません。IIFEsとして構築されており、<script src="...">経由での直接使用のみを想定しています。

vue-i18n-bridge(.runtime).esm-browser(.prod).js:
- ブラウザ内で<script type="module">を介したネイティブESモジュールインポートで使用します。
- グローバルビルドと同じランタイムコンパイル、依存関係のインライン化、およびハードコードされたプロダクション/開発の動作を共有します。

バンドラーを使用する場合

vue-i18n-bridge(.runtime).esm-bundler.js:
- webpack、rollup、parcelなどのバンドラーで使用します。
- プロダクション/開発分岐はprocess.env.NODE_ENVガードを残し（バンドラーによって置き換えられる必要があります）。
- 最小化されたビルドは出荷されません（バンドリング後に他のコードと一緒に最小化されます）。
- 依存関係をインポートします（例：@intlify/core-base、@intlify/message-compiler）。
  - インポートされた依存関係もesm-bundlerビルドであり、それ自体がそれらの依存関係をインポートします（例：@intlify/message-compilerは@intlify/sharedをインポートします）。
  - これにより、これらの依存関係を個別にインストール/インポートしても、これらの依存関係の異なるインスタンスにならずに済む可能性がありますが、すべて同じバージョンに解決されるようにする必要があります。
- ブラウザでのローカルメッセージコンパイル:
  - vue-i18n-bridge.runtime.esm-bundler.js はランタイムのみで、すべてのローカルメッセージを事前にコンパイルする必要があります。これはバンドラーを使用する場合にテンプレートは通常事前にコンパイルされている（例：*.jsonファイル内）ため、バンドラーのデフォルトエントリです（package.jsonのmoduleフィールドを介して）。
  - vue-i18n-bridge.esm-bundler.js（デフォルト）: ランタイムコンパイラを含みます。バンドラーを使用しながらローカルメッセージのコンパイルを希望する場合はこれを使用します（例：インラインJavaScript文字列によるテンプレート）。このビルドを使用するには、インポートステートメントを変更します：import { createI18n } from "vue-i18n-bridge/dist/vue-i18n-bridge.esm-bundler.js";

注意

vue-i18n-bridge.runtime.esm-bundler.jsを使用する場合、すべてのローカルメッセージを事前にコンパイルする必要があります。.json（.json5）または.yaml、i18nカスタムブロックを使用してi18nリソースを管理できます。従って、バンドラーと以下のローダー/プラグインですべてのローカルメッセージを事前にコンパイルできます。

@intlify/unplugin-vue-i18n

Node.js（サーバーサイド）の場合

vue-i18n-bridge.cjs(.prod).js:
- Node.jsでrequire()を使用する場合です。
- webpackでtarget: 'node'でアプリをバンドルし、vue-i18n-bridgeを適切に外部化している場合、このビルドが読み込まれます。
- 開発/プロダクションファイルは事前にビルドされていますが、適切なファイルはprocess.env.NODE_ENVに基づいて自動的に要求されます。

`vue-i18n-composable`

コンポジションAPIはVue 3からサポートされており、公式の@vue/composition-apiプラグインを使用してVue 2でもコンポジションAPIを利用できます。

Vue I18nコンポジションAPIは、vue-i18n-composableプラグインを使用してVue 2でも利用できます。

使用方法についてはこちらをご参照ください。

注意

vue-i18n-composableは、Vue I18n v8.xのメインAPIをコンポジションAPIで動作させることができます。Vue I18n v9で提供されるコンポジションAPIはすべて利用できません。

general

Variables

Functions

Interfaces

Type Aliases

vue

Interfaces

Vue 2からの移行

`vue-i18n-bridge`

`vue-i18n-bridge`とは？

インストール

パッケージマネージャー

CDN

使用方法

コンポジションAPI

レガシーアプリケーションAPI

ブラウザでのUMDモジュールの使用

Vue 2.7の場合

Vue 2.6の場合

制限事項

異なるビルドについての説明

CDNまたはバンドラーなしの場合

バンドラーを使用する場合

Node.js（サーバーサイド）の場合

`vue-i18n-composable`

Vue 2からの移行 ​

vue-i18n-bridge ​

vue-i18n-bridgeとは？ ​

インストール ​

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

CDN ​

使用方法 ​

コンポジションAPI ​

レガシーアプリケーションAPI ​

ブラウザでのUMDモジュールの使用 ​

Vue 2.7の場合 ​

Vue 2.6の場合 ​

制限事項 ​

異なるビルドについての説明 ​

CDNまたはバンドラーなしの場合 ​

バンドラーを使用する場合 ​

Node.js（サーバーサイド）の場合 ​

vue-i18n-composable ​

Vue 2からの移行

`vue-i18n-bridge`

`vue-i18n-bridge`とは？

インストール

パッケージマネージャー

CDN

使用方法

コンポジションAPI

レガシーアプリケーションAPI

ブラウザでのUMDモジュールの使用

Vue 2.7の場合

Vue 2.6の場合

制限事項

異なるビルドについての説明

CDNまたはバンドラーなしの場合

バンドラーを使用する場合

Node.js（サーバーサイド）の場合

`vue-i18n-composable`