Intlayer を使って Nuxt と Vue のウェブサイトを翻訳する | 国際化（i18n）

目次

代替手段ではなく Interlayer を使用する理由

「@nuxtjs/i18n」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。

NuxtアプリケーションでIntlayerをセットアップするステップバイステップガイド

ビデオコードデモ

www.youtube.com

Open embedded page in fullscreen

ide.intlayer.org

Open embedded page in fullscreen

intlayer-nuxt-4-template.vercel.app

Open embedded page in fullscreen

GitHubのアプリケーションテンプレートを参照してください。

1. 1

   依存関係のインストール

   npmを使って必要なパッケージをインストールします:

   bash

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   npx intlayer init --interactive
   

   --interactive フラグはオプションです。AI エージェントの場合は intlayer-cli init を使用してください。

   このコマンドは環境を検出し、必要なパッケージをインストールします。例えば：

   bash

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   npm install intlayer vue-intlayer
   npm install --save-dev nuxt-intlayer
   

   • intlayer

     設定管理、翻訳、コンテンツ宣言、トランスパイル、およびCLIコマンドのための国際化ツールを提供するコアパッケージです。

   • vue-intlayer IntlayerをVueアプリケーションに統合するパッケージです。Vueコンポーネント用のcomposablesを提供します。

   • nuxt-intlayer NuxtアプリケーションとIntlayerを統合するNuxtモジュールです。自動セットアップ、ロケール検出のためのミドルウェア、クッキー管理、URLリダイレクトを提供します。

2. 2

   プロジェクトの設定

   アプリケーションの言語を設定するための設定ファイルを作成します。

   intlayer.config.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { Locales, type IntlayerConfig } from "intlayer";
   
   const config: IntlayerConfig = {
     internationalization: {
       locales: [
         Locales.ENGLISH,
         Locales.FRENCH,
         Locales.SPANISH,
         // 他のロケールをここに追加
       ],
       defaultLocale: Locales.ENGLISH,
     },
   };
   
   export default config;
   

   この設定ファイルを通じて、ローカライズされたURL、ミドルウェアのリダイレクション、クッキー名、コンテンツ宣言の場所と拡張子、Intlayerのコンソールログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。

3. 3

   Nuxt設定にIntlayerを統合する

   Nuxtの設定にintlayerモジュールを追加します:

   nuxt.config.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { defineNuxtConfig } from "nuxt/config";
   
   export default defineNuxtConfig({
     // ... 既存のNuxt設定
     modules: ["nuxt-intlayer"],
   });
   

   nuxt-intlayer モジュールは、Intlayer と Nuxt の統合を自動的に処理します。コンテンツ宣言のビルドを設定し、開発モードでファイルを監視し、ロケール検出のためのミドルウェアを提供し、ローカライズされたルーティングを管理します。

4. 4

   コンテンツを宣言する

   翻訳を格納するためのコンテンツ宣言を作成および管理します：

   コンテンツ宣言は、contentDir ディレクトリ（デフォルトは ./src）に含まれている限り、アプリケーションのどこにでも定義できます。また、コンテンツ宣言ファイルの拡張子（デフォルトは .content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}）に一致している必要があります。

   詳細については、コンテンツ宣言ドキュメントを参照してください。

5. 5

   コード内でIntlayerを利用する

   useIntlayerコンポーザブルを使って、Nuxtアプリケーション全体でコンテンツ辞書にアクセスします:

   components/HelloWorld.vue

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   <script setup lang="ts">
   import { ref } from "vue";
   import { useIntlayer } from "vue-intlayer";
   
   defineProps({
     msg: String,
   });
   
   const {
     count,
     edit,
     checkOut,
     nuxtIntlayer,
     learnMore,
     nuxtDocs,
     readTheDocs,
   } = useIntlayer("helloworld");
   const countRef = ref(0);
   </script>
   
   <template>
     <h1>{{ msg }}</h1>
   
     <div class="card">
       <button type="button" @click="countRef++">
         <count />
         {{ countRef }}
       </button>
       <p v-html="edit"></p>
     </div>
   
     <p>
       <checkOut />
       <a href="https://nuxt.com/docs/getting-started/introduction" target="_blank"
         >Nuxt</a
       >、<nuxtIntlayer />
     </p>
     <p>
       <learnMore />
       <a href="https://nuxt.com" target="_blank"><nuxtDocs /></a>。
     </p>
     <p class="read-the-docs"><readTheDocs /></p>
     <p class="read-the-docs">{{ readTheDocs }}</p>
   </template>
   

   Intlayerでのコンテンツアクセス

   IntlayerはコンテンツにアクセスするためのさまざまなAPIを提供しています：

   • コンポーネントベースの構文（推奨）： <myContent /> または <Component :is="myContent" /> の構文を使用して、コンテンツを Intlayer ノードとしてレンダリングします。これは Visual Editor および CMS とシームレスに統合されます。

   • 文字列ベースの構文:
     {{ myContent }} を使用して、Visual Editor のサポートなしにプレーンテキストとしてコンテンツをレンダリングします。

   • 生の HTML 構文:
     <div v-html="myContent" /> を使用して、Visual Editor のサポートなしに生の HTML としてコンテンツをレンダリングします。

   • 分割代入構文:
     useIntlayer コンポーザブルはコンテンツを含む Proxy を返します。この Proxy はリアクティビティを保ちながらコンテンツにアクセスするために分割代入可能です。

     • const content = useIntlayer("myContent"); を使用し、{{ content.myContent }} / <content.myContent /> としてレンダリングします。
     • または、const { myContent } = useIntlayer("myContent"); を使用してコンテンツを分割代入し、{{ myContent }} / <myContent/> としてレンダリングします。
6. 6

   コンテンツの言語を変更する

   コンテンツの言語を変更するには、useLocale コンポーザブルが提供する setLocale 関数を使用します。この関数により、アプリケーションのロケールを設定し、それに応じてコンテンツを更新できます。

   NuxtLink を使用して言語を切り替えるコンポーネントを作成します。ロケール切り替えにボタンではなくリンクを使うことは、SEOやページの発見性向上のベストプラクティスです。これにより、検索エンジンがすべてのローカライズされたページをクロールしインデックス化できます。

   components/LocaleSwitcher.vue

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   <script setup lang="ts">
   import { getLocaleName, getLocalizedUrl } from "intlayer";
   import { useLocale } from "vue-intlayer";
   
   // NuxtはuseRouteを自動インポートします
   const route = useRoute();
   const { locale, availableLocales, setLocale } = useLocale();
   </script>
   
   <template>
     <nav class="locale-switcher">
       <NuxtLink
         v-for="localeEl in availableLocales"
         :key="localeEl"
         :to="getLocalizedUrl(route.fullPath, localeEl)"
         class="locale-link"
         :class="{ 'active-locale': localeEl === locale }"
         @click="setLocale(localeEl)"
       >
         {{ getLocaleName(localeEl) }}
       </NuxtLink>
     </nav>
   </template>
   

   NuxtLink を適切な href 属性（getLocalizedUrl 経由）と共に使用することで、検索エンジンがページのすべての言語バリアントを検出できるようになります。これは、検索エンジンクローラーが追跡しない可能性のあるJavaScriptのみのロケール切り替えよりも望ましい方法です。

   次に、app.vue を設定してレイアウトを使用します：

   app.vue

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   <template>
     <NuxtLayout>
       <NuxtPage />
     </NuxtLayout>
   </template>
   

7. 7

   アプリケーションにローカライズされたルーティングを追加する

   nuxt-intlayer モジュールを使用すると、Nuxtはローカライズされたルーティングを自動的に処理します。これは、ページのディレクトリ構造に基づいて各言語のルートを自動的に作成します。

   例:

   plaintext

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   pages/
   ├── index.vue          → /, /fr, /es
   ├── about.vue          → /about, /fr/about, /es/about
   └── contact/
       └── index.vue      → /contact, /fr/contact, /es/contact
   

   ローカライズされたページを作成するには、単に pages/ ディレクトリに Vue ファイルを作成します。以下に2つの例を示します。

   ホームページ (pages/index.vue):

   pages/index.vue

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   <script setup lang="ts">
   import { useIntlayer } from "vue-intlayer";
   
   const content = useIntlayer("home-page");
   
   useHead({
     title: content.metaTitle.raw,
     meta: [
       {
         name: "description",
         content: content.metaDescription.raw,
       },
     ],
   });
   </script>
   
   <template>
     <h1><content.title /></h1>
   </template>
   

   アバウトページ (pages/about.vue):

   pages/about.vue

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   <script setup lang="ts">
   import { useIntlayer } from "vue-intlayer";
   
   const content = useIntlayer("about-page");
   
   useHead({
     title: content.metaTitle.raw, // プリミティブ文字列アクセスには .raw を使用
     meta: [
       {
         name: "description",
         content: content.metaDescription.raw, // プリミティブな文字列アクセスには .raw を使用
       },
     ],
   });
   </script>
   
   <template>
     <h1><content.title /></h1>
   </template>
   

   注意: useHead は Nuxt で自動インポートされます。コンテンツの値には .value（リアクティブ）または .raw（プリミティブ文字列）を用途に応じて使用できます。

   nuxt-intlayer モジュールは自動的に以下を行います：

   • ユーザーの優先ロケールを検出
   • URL を介したロケール切り替えの処理
   • 適切な <html lang=""> 属性の設定
   • ロケールクッキーの管理
   • ユーザーを適切なローカライズされた URL にリダイレクト
8. 8

   ローカライズされたリンクコンポーネントの作成

   アプリケーションのナビゲーションが現在のロケールを尊重するようにするために、カスタムの Links コンポーネントを作成できます。このコンポーネントは内部URLに自動的に現在の言語をプレフィックスとして付加し、これはSEOおよびページの発見性に不可欠です。

   components/Links.vue

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   <script setup lang="ts">
   import { getLocalizedUrl } from "intlayer";
   import { useLocale } from "vue-intlayer";
   
   interface Props {
     href: string;
     locale?: string;
   }
   
   const props = defineProps<Props>();
   
   const { locale: currentLocale } = useLocale();
   
   // 最終的なパスを計算する
   const finalPath = computed(() => {
     // 1. リンクが外部かどうかをチェック
     const isExternal = /^https?:\/\//.test(props.href || "");
   
     // 2. 外部の場合はそのまま返す（NuxtLinkが<a>タグの生成を処理）
     if (isExternal) return props.href;
   
     // 3. 内部リンクの場合、URLをローカライズする
     const targetLocale = props.locale || currentLocale.value;
     return getLocalizedUrl(props.href, targetLocale);
   });
   </script>
   
   <template>
     <NuxtLink :to="finalPath" v-bind="$attrs">
       <slot />
     </NuxtLink>
   </template>
   

   次に、このコンポーネントをアプリケーション全体で使用します:

   layouts/default.vue

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   <script setup lang="ts">
   import Links from "~/components/Links.vue";
   import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
   </script>
   
   <template>
     <div>
       <header>
         <LocaleSwitcher />
       </header>
       <main>
         <slot />
       </main>
   
       <Links href="/">ホーム</Links>
       <Links href="/about">アバウト</Links>
     </div>
   </template>
   

   NuxtLink をローカライズされたパスで使用することで、以下を保証できます：

   • 検索エンジンがすべての言語バージョンのページをクロールおよびインデックスできる
   • ユーザーがローカライズされたURLを直接共有できる
   • ブラウザの履歴がロケール接頭辞付きURLで正しく動作する

9. 9

   メタデータとSEOの処理

   Nuxtは useHead コンポーザブル（自動インポート）を通じて優れたSEO機能を提供します。Intlayerを使って、.raw または .value アクセサを用いてプリミティブな文字列値を取得し、ローカライズされたメタデータを扱うことができます：

   pages/about.vue

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   <script setup lang="ts">
   import { useIntlayer } from "vue-intlayer";
   
   // useHeadはNuxtで自動インポートされます
   const content = useIntlayer("about-page");
   
   useHead({
     title: content.metaTitle.raw, // プリミティブな文字列アクセスには .raw を使用
     meta: [
       {
         name: "description",
         content: content.metaDescription.raw, // プリミティブな文字列アクセスには .raw を使用
       },
     ],
   });
   </script>
   
   <template>
     <h1><content.title /></h1>
   </template>
   

   あるいは、Vueのリアクティビティなしでコンテンツを取得するために import { getIntlayer } from "intlayer" 関数を使用することもできます。

   コンテンツ値へのアクセス方法:

   • プリミティブな文字列値（非リアクティブ）を取得するには .raw を使用
   • リアクティブな値を取得するには .value を使用
   • Visual Editorサポートのために <content.key /> コンポーネント構文を使用

   対応するコンテンツ宣言を作成します:

   pages/about-page.content.ts

   コンテンツをコピー

   コードをコピー

   コードをクリップボードにコピー

   import { t, type Dictionary } from "intlayer";
   
   const aboutPageContent = {
     key: "about-page",
     content: {
       metaTitle: t({
         en: "About Us - My Company",
         fr: "À Propos - Ma Société",
         es: "Acerca de Nosotros - Mi Empresa",
       }),
       metaDescription: t({
         ja: "私たちの会社とミッションについて詳しく知る",
         en: "Learn more about our company and our mission",
         fr: "En savoir plus sur notre société et notre mission",
         es: "Conozca más sobre nuestra empresa y nuestra misión",
       }),
       title: t({
         ja: "私たちについて",
         en: "About Us",
         fr: "À Propos",
         es: "Acerca de Nosotros",
       }),
     },
   } satisfies Dictionary;
   
   export default aboutPageContent;
   

10. 6b

    ナビゲーション付きレイアウトの作成

    オプション

    Nuxtのレイアウトを使うと、ページの共通構造を定義できます。ロケールスイッチャーとナビゲーションを含むデフォルトレイアウトを作成しましょう：

    layouts/default.vue

    コンテンツをコピー

    コードをコピー

    コードをクリップボードにコピー

    <script setup lang="ts">
    import Links from "~/components/Links.vue";
    import LocaleSwitcher from "~/components/LocaleSwitcher.vue";
    </script>
    
    <template>
      <div>
        <header>
          <LocaleSwitcher />
        </header>
        <main>
          <slot />
        </main>
    
        <Links href="/">ホーム</Links>
        <Links href="/about">アバウト</Links>
      </div>
    </template>
    

    Links コンポーネント（以下に示す）は、内部ナビゲーションリンクが自動的にローカライズされることを保証します。

Gitの設定

Intlayerによって生成されたファイルは無視することを推奨します。これにより、Gitリポジトリへの不要なコミットを防ぐことができます。

これを行うには、.gitignoreファイルに以下の指示を追加してください。

# Intlayerによって生成されたファイルを無視する
.intlayer

VS Code拡張機能

Intlayerでの開発体験を向上させるために、公式のIntlayer VS Code拡張機能をインストールできます。

VS Codeマーケットプレイスからインストール

この拡張機能は以下を提供します：

• 翻訳キーのオートコンプリート。
• 欠落している翻訳のリアルタイムエラー検出。
• 翻訳されたコンテンツのインラインプレビュー。
• 翻訳を簡単に作成・更新できるクイックアクション。

拡張機能の使い方の詳細については、Intlayer VS Code拡張機能のドキュメントを参照してください。

さらに進む

さらに進めるには、ビジュアルエディターを実装するか、CMSを使用してコンテンツを外部化することができます。

よくある質問