このページとあなたの好きなAIアシスタントを使ってドキュメントを要約します
バージョン履歴
- "Solid の useIntlayer API の使用法を直接プロパティアクセスに更新"v8.9.02026/5/4
- "LocaleSwitcher、SEO、メタデータの更新"v7.3.112025/12/7
- "履歴の初期化"v5.5.102025/6/29
このページのコンテンツはAIを使用して翻訳されました。
英語の元のコンテンツの最新バージョンを見るIf you have an idea for improving this documentation, please feel free to contribute by submitting a pull request on GitHub.
GitHub link to the documentationCopy doc Markdown to clipboard
Intlayer を使って Nuxt と Vue のウェブサイトを翻訳する | 国際化（i18n）
目次
代替手段ではなく Interlayer を使用する理由
「@nuxtjs/i18n」や「i18next」などの主要なソリューションと比較して、Intlayer は次のような統合された最適化を備えたソリューションです。
Nuxt を完全にカバー
Intlayer は、多言語ルーティング、ロケール検出用のミドルウェア、サイトマップ、および国際化のスケーリング (i18n) に必要なすべての機能を提供することにより、Nuxt と完全に連携するように最適化されています。
バンドルサイズ
大量の JSON ファイルをページにロードするのではなく、必要なコンテンツのみをロードします。 Intlayer は、バンドルとページのサイズを最大 50% 削減するのに役立ちます。
保守性
アプリケーションのコンテンツのスコープを設定すると、大規模なアプリケーションの メンテナンスが容易になります。コンテンツ コードベース全体を確認するという精神的な負担を負うことなく、単一の機能フォルダーを複製または削除できます。さらに、Intlayer は完全に型指定されており、コンテンツの正確性を保証します。
AI エージェント
コンテンツを同じ場所に配置すると、大規模言語モデル (LLM) によって 必要なコンテキストが削減されます。 Intlayer には、翻訳の欠落をテストする CLI、LSP、MCP などのツール スイートも付属しています。および エージェント スキル により、AI エージェントの開発者エクスペリエンス (DX) がさらにスムーズになります。
オートメーション
AI プロバイダーの費用で、選択した LLM を使用して CI/CD パイプラインで自動化を変換します。 Intlayer は、コンテンツ抽出を自動化する コンパイラー と、バックグラウンドでの翻訳を支援する Web プラットフォーム も提供します。
パフォーマンス
大量の JSON ファイルをコンポーネントに接続すると、パフォーマンスと反応性の問題が発生する可能性があります。 Intlayer は、ビルド時のコンテンツの読み込みを最適化します。
非開発によるスケーリング
Intlayer は単なる i18n ソリューションではなく、自己ホスト型 ビジュアル エディター と 完全な CMS を提供します。 リアルタイムで多言語コンテンツを管理できるようになり、翻訳者、コピーライター、その他のチーム メンバーとのコラボレーションがシームレスになります。コンテンツはローカルおよび/またはリモートに保存できます。
NuxtアプリケーションでIntlayerをセットアップするステップバイステップガイド
GitHubのアプリケーションテンプレートを参照してください。
依存関係のインストール
npmを使って必要なパッケージをインストールします:
bashコードをコピーコードをクリップボードにコピー
npm install intlayer vue-intlayernpm install --save-dev nuxt-intlayernpx intlayer initプロジェクトの設定
アプリケーションの言語を設定するための設定ファイルを作成します。
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のコンソールログの無効化などを設定できます。利用可能なパラメータの完全なリストについては、設定ドキュメントを参照してください。
Nuxt設定にIntlayerを統合する
Nuxtの設定にintlayerモジュールを追加します:
nuxt.config.tsコードをコピーコードをクリップボードにコピー
import { defineNuxtConfig } from "nuxt/config";export default defineNuxtConfig({ // ... 既存のNuxt設定 modules: ["nuxt-intlayer"],});nuxt-intlayerモジュールは、Intlayer と Nuxt の統合を自動的に処理します。コンテンツ宣言のビルドを設定し、開発モードでファイルを監視し、ロケール検出のためのミドルウェアを提供し、ローカライズされたルーティングを管理します。コンテンツを宣言する
翻訳を格納するためのコンテンツ宣言を作成および管理します：
コンテンツ宣言は、
contentDirディレクトリ（デフォルトは./src）に含まれている限り、アプリケーションのどこにでも定義できます。また、コンテンツ宣言ファイルの拡張子（デフォルトは.content.{json,ts,tsx,js,jsx,mjs,cjs,md,mdx,yaml,yml}）に一致している必要があります。詳細については、コンテンツ宣言ドキュメントを参照してください。
コード内で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/>としてレンダリングします。
コンテンツの言語を変更する
コンテンツの言語を変更するには、
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>アプリケーションにローカライズされたルーティングを追加する
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 にリダイレクト
ローカライズされたリンクコンポーネントの作成
アプリケーションのナビゲーションが現在のロケールを尊重するようにするために、カスタムの
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で正しく動作する
メタデータと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;- プリミティブな文字列値（非リアクティブ）を取得するには
（オプション）ステップ6b：ナビゲーション付きレイアウトの作成
Nuxtのレイアウトを使うと、ページの共通構造を定義できます。ロケールスイッチャーとナビゲーションを含むデフォルトレイアウトを作成しましょう：
コードをクリップボードにコピー
<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によって生成されたファイルを無視する.intlayerVS Code拡張機能
Intlayerでの開発体験を向上させるために、公式のIntlayer VS Code拡張機能をインストールできます。
この拡張機能は以下を提供します：
- 翻訳キーのオートコンプリート。
- 欠落している翻訳のリアルタイムエラー検出。
- 翻訳されたコンテンツのインラインプレビュー。
- 翻訳を簡単に作成・更新できるクイックアクション。
拡張機能の使い方の詳細については、Intlayer VS Code拡張機能のドキュメントを参照してください。
さらに進む
さらに進めるには、ビジュアルエディターを実装するか、CMSを使用してコンテンツを外部化することができます。