Nuxt 3 統合

Vue I18n を Nuxt 3 で使用するには、高度な機能（ローカライズされたルーティング、SEO タグなど）を持つ Nuxt I18n (@nuxtjs/i18n) の使用を推奨します。

独自の Nuxt 3 統合の作成

以下の内容は、Nuxt プラグインを通じて Vue I18n を追加して、独自の統合を持つ Nuxt 3 アプリケーションを設定するためのチュートリアルです。

注意

この統合チュートリアルは、高度な i18n 機能（ルーティングや SEO タグなど）はサポートしておらず、デモンストレーション目的です。詳細については、Nuxt I18n モジュールをご利用ください。ドキュメントは i18n.nuxtjs.org で確認できます。

要件

このチュートリアルの Node.js 要件は Nuxt 3 と同じ環境です。

Node.js のバージョンについては、こちらをご確認ください。

例コード

チュートリアルのコードは以下で入手できます：examples/frameworks/nuxt3。

このチュートリアルに従って作成されたデプロイ済みアプリでは、DeepLによる翻訳を提供するカスタムGitHubアクションを使用しています。

Nuxt 3 アプリケーションへの vue-i18n の設定

それでは、Nuxt 3 と Vue I18n を使用するための初期環境を設定していきます。

Nuxt 3 アプリケーションの作成

以下のコマンドを実行して、Nuxt 3 アプリケーションを作成します：

npx nuxi init nuxt3-app-vue-i18n

pnpm dlx nuxi init nuxt3-app-vue-i18n

上記コマンドを実行すると、作成された Nuxt 3 初期プロジェクトは以下のディレクトリ構造になります：

txt

cd nuxt3-app-vue-i18n
tree -L 1
.
├── README.md
├── app.vue
├── nuxt.config.ts
├── package.json
└── tsconfig.json

Vue I18n のインストール

以下のコマンドで Vue I18n をインストールします：

npmyarnpnpm

npm install vue-i18n -D

yarn add vue-i18n -D

pnpm add -D vue-i18n

Nuxt プラグインの設定

以下のように plugins ディレクトリを作成します：

mkdir plugins

次に、Vue I18n を設定するための Nuxt プラグインファイルを作成します。

touch plugins/i18n.ts

作成後、以下の通りプラグインを定義します：

import { createI18n } from 'vue-i18n'

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'en',
    messages: {
      en: {
        hello: 'Hello, {name}!'
      }
    }
  })

  vueApp.use(i18n)
})

Nuxt 3 アプリケーションをローカライズするためのロケールリソースの設定は次のセクションで説明します。

Nuxt 3 アプリケーションの実行

Vue I18n が Nuxt 3 で動作するか確認してみましょう。

設定された Nuxt 3 アプリケーションの app.vue は以下のように編集します：

vue

<template>
  <div>
    <NuxtWelcome /> // [!code --]
    <h1>{{ $t('hello', { name: 'vue-i18n' }) }}</h1> // [!code ++]
  </div>
</template>

編集・保存後、以下のコマンドを実行してローカルで Nuxt 3 アプリケーションを実行します：

npmyarnpnpm

npm run dev

yarn dev

pnpm dev

アプリケーションが http://localhost:3000 で提供されると、以下のようになります：

Nuxt3 setup

Nuxt 3 アプリケーションのローカライズ

これまで、Vue I18n を Nuxt 3 アプリケーションに統合することができました。言語切り替えの実装と外部からのロケールリソースのインポートを行いましょう。

言語切り替えを実装することで、Nuxt 3 アプリケーションを効果的に i18n にします。🌎 🌍 🌏

また、ロケールリソースをソースコードから分離（外部化）することで、ローカライズサービスの助けを借りてアプリケーションをローカライズするための別のワークフローを活用できます。

以下のセクションでは、Nuxt 3 アプリで英語、フランス語、日本語のサポートを有効にします。

言語切り替えの追加

app.vue に言語切り替え機能を以下のように追加します：

vue

<template>
  <div>
    <h1>{{ $t('hello', { name: 'vue-i18n' }) }}</h1>
    <form>
      <label for="locale-select">{{ $t('language') }}: </label> // [!code ++]
      <select
        id="locale-select"
        v-model="$i18n.locale"
      >
        <option value="en">
          en
        </option> // [!code ++]
        <option value="fr">
          fr
        </option> // [!code ++]
        <option value="ja">
          ja
        </option> // [!code ++]
      </select> // [!code ++]
    </form> // [!code ++]
  </div>
</template>

言語切り替えは form 上の select 要素を使用して実装されます。各オプションの値はロケールコードを定義し、後でロケールリソースの外部化に関する説明で詳しく述べられます。

各オプションの値はロケールコードの値として定義され、後でロケールリソースの外部化について説明します。

ロケールリソースの外部化

ロケールリソースを外部に定義します。

Vue I18n は複数のリソースファイル形式をサポートしています。この場合、JSON を選択します。

以下のようにコマンドを実行して、locales という名前の非「Nuxt-3 標準」ディレクトリを作成します：

mkdir locales

それでは、サポートしたい各ロケールの JSON ファイルを作成します：

touch locales/en.json # 英語用
touch locales/fr.json # フランス語用
touch locales/ja.json # 日本語用

それぞれ以下の内容で入力します：

英語用 locales/en.json：

json

{
  "hello": "Hello, {name}!",
  "language": "Language"
}

フランス語用 locales/fr.json：

json

{
  "hello": "Bonjour, {name}!",
  "language": "Langue"
}

日本語用 locales/ja.json：

json

{
  "hello": "こんにちは、{name}！",
  "language": "言語"
}

ロケールリソースのインポート

プラグイン (plugins/i18n.ts) でロケールを以下のように「登録」します：

import { createI18n } from 'vue-i18n'
import en from '../locales/en.json'
import fr from '../locales/fr.json'
import ja from '../locales/ja.json'

export default defineNuxtPlugin(({ vueApp }) => {
  const i18n = createI18n({
    legacy: false,
    globalInjection: true,
    locale: 'en',
    messages: {
      en: { 
        hello: "Hello, {name}!"
      } 
      en, 
      fr, 
      ja 
    }
  })

  vueApp.use(i18n)
})

messages オプションは、私たちがそれに登録するローカルリソースを保持し、望む限り細かく制御できます。この粒度により、ローカリゼーションサービスとの連携が容易になります。

npm run dev（または yarn dev または pnpm dev）を実行し、http://localhost:3000 にアクセスして変更が正しく機能するか確認します。

Setup i18n on Nuxt3

これで Nuxt 3 アプリケーションは基本的な国際化の準備ができました！🎉

`@intlify/unplugin-vue-i18n` による最適化

これまで、Vue I18n を使用して Nuxt 3 アプリケーションで言語切り替えをサポートすることができました。また、ロケールリソースを外部化することで、それらをソースコードから分離し、ロケールリソースの管理とローカライゼーションサービスとの統合を容易にしています。

しかし、最適化で記述されているように、これまでに準備した Nuxt 3 アプリケーションはバンドルサイズに関して最適ではありません。

Vue I18n v9 以降、メッセージコンパイラによりロケールリソースの事前コンパイルが可能になり、パフォーマンス向上が可能になりましたが、その性能のためにまだ最適化されていません。

@intlify/unplugin-vue-i18n は Vue I18n のパフォーマンスを最適化するものです。

`@intlify/unplugin-vue-i18n` のインストール

npmyarnpnpm

npm install @intlify/unplugin-vue-i18n -D

yarn add @intlify/unplugin-vue-i18n -D

pnpm add -D @intlify/unplugin-vue-i18n

Nuxt 設定の構成

nuxt.config.ts を以下のように設定します：

import { defineNuxtConfig } from 'nuxt'
import { resolve, dirname } from 'node:path'
import { fileURLToPath } from 'url'
import VueI18nVitePlugin from '@intlify/unplugin-vue-i18n/vite'

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  build: { 
    transpile: ['vue-i18n'] 
  }, 
  vite: { 
    plugins: [ 
      VueI18nVitePlugin({ 
        include: [ 
          resolve(dirname(fileURLToPath(import.meta.url)), './locales/*.json') 
        ] 
      }) 
    ] 
  } 
})

Nuxt 3 のデフォルトのバンドラは Vite です。したがって、ここでは最適化のために vite オプションを使用します。

vite.plugins で @intlify/unplugin-vue-i18n のプラグインを構成します。このプラグインのオプションとして include オプションは locales ディレクトリに配置された JSON 形式のロケールリソースを指定します。これにより、@intlify/unplugin-vue-i18n は Vue I18n メッセージコンパイラを内部的に使用してバンドル時にロケールリソースを事前にコンパイルできます。これにより、Vue I18n の翻訳パフォーマンスが向上し、結果として Nuxt 3 アプリケーションのレンダリングパフォーマンスも向上します。

最適化付きバンドル内での動作

設定完了後、npm run dev を実行して確認します！

http://localhost:3000 にアクセスすると、Nuxt 3 アプリケーションの動作は同じままですが、バンドルサイズに変化があります。

以下は、@intlify/unplugin-vue-i18n がない場合とある場合のネットワークタブで測定されたバンドルサイズの比較です：

Reduce bundle size

青色で強調表示された領域は vite によってバンドルされたコードです。

このプラグインを設定することで、プラグインは内部的にランタイムのみの Vue I18n モジュールをセットアップします。具体的には、vite の設定 resolve.alias で vue-i18n のエイリアスを Vue I18n ランタイムのみ (vue-i18n/dist/vue-i18n.runtime.esm-bundler.js) を使用するように設定します。この設定により、Vue I18n で使用されるメッセージコンパイラが含まれなくなるため、バンドルサイズが削減されます。

詳細については、@intlify/unplugin-vue-i18n のドキュメントを参照してください。

また、ロケールリソースのバンドル変更も確認できます。

vite.plugins に @intlify/unplugin-vue-i18n プラグインが設定されているかどうかに応じたロケールリソースのコードです。以下：

Pre-compile

vite.plugins に @intlify/unplugin-vue-i18n プラグインがない場合、ロケールリソースは json としてバンドルされますが、このプラグインが設定されている場合は、バンドルサイズの削減のために json から JavaScript コードに変換されます。

Vue I18n はすでにコンパイルされているため、関数を呼び出すだけです。

このガイドでは、Nuxt 3 アプリケーションは小さいため、最適化のパフォーマンスを十分に体験することはできませんが、アプリケーションが大きくなるにつれて、確実に恩恵を受けます。

general

Variables

Functions

Interfaces

Type Aliases

vue

Interfaces

Nuxt 3 統合

独自の Nuxt 3 統合の作成

要件

例コード

Nuxt 3 アプリケーションへの vue-i18n の設定

Nuxt 3 アプリケーションの作成

Vue I18n のインストール

Nuxt プラグインの設定

Nuxt 3 アプリケーションの実行

Nuxt 3 アプリケーションのローカライズ

言語切り替えの追加

ロケールリソースの外部化

ロケールリソースのインポート

`@intlify/unplugin-vue-i18n` による最適化

`@intlify/unplugin-vue-i18n` のインストール

Nuxt 設定の構成

最適化付きバンドル内での動作

Nuxt 3 統合 ​

独自の Nuxt 3 統合の作成 ​

要件 ​

例コード ​

Nuxt 3 アプリケーションへの vue-i18n の設定 ​

Nuxt 3 アプリケーションの作成 ​

Vue I18n のインストール ​

Nuxt プラグインの設定 ​

Nuxt 3 アプリケーションの実行 ​

Nuxt 3 アプリケーションのローカライズ ​

言語切り替えの追加 ​

ロケールリソースの外部化 ​

ロケールリソースのインポート ​

@intlify/unplugin-vue-i18n による最適化 ​

@intlify/unplugin-vue-i18n のインストール ​

Nuxt 設定の構成 ​

最適化付きバンドル内での動作 ​

Nuxt 3 統合

独自の Nuxt 3 統合の作成

要件

例コード

Nuxt 3 アプリケーションへの vue-i18n の設定

Nuxt 3 アプリケーションの作成

Vue I18n のインストール

Nuxt プラグインの設定

Nuxt 3 アプリケーションの実行

Nuxt 3 アプリケーションのローカライズ

言語切り替えの追加

ロケールリソースの外部化

ロケールリソースのインポート

`@intlify/unplugin-vue-i18n` による最適化

`@intlify/unplugin-vue-i18n` のインストール

Nuxt 設定の構成

最適化付きバンドル内での動作