i18n コードジェネレーター
フレームワークの国際化設定コードを生成 — 無料・即時・登録不要
パッケージマネージャー
インストールコマンド
npm install @nuxtjs/i18n
nuxt.config.ts
設定ファイル — i18n プラグインを登録しデフォルト言語を設定
// nuxt.config.ts
export default defineNuxtConfig({
modules: ["@nuxtjs/i18n"],
i18n: {
locales: [
{ code: "en", file: "en.json", name: "English" },
{ code: "ja", file: "ja.json", name: "日本語" },
],
defaultLocale: "en",
lazy: true,
langDir: "locales/",
strategy: "prefix_except_default",
},
}); i18n/locales/en.json
サンプルロケールファイル — 翻訳キーを追加
{
"hello": "Hello",
"welcome": "Welcome to {name}",
"nav": {
"home": "Home",
"about": "About",
"contact": "Contact"
},
"items": "no items | one item | {count} items"
} app.vue
使用例 — コンポーネントで翻訳を使用
<script setup>
const { t } = useI18n();
const localePath = useLocalePath();
</script>
<template>
<div>
<h1>{{ $t("hello") }}</h1>
<p>{{ $t("welcome", { name: "Glot" }) }}</p>
<nav>
<NuxtLink :to="localePath('/')">{{ $t("nav.home") }}</NuxtLink>
<NuxtLink :to="localePath('/about')">{{ $t("nav.about") }}</NuxtLink>
</nav>
</div>
</template>i18n コードジェネレーターの使い方
- 1
フレームワークを選択する
Vue/Nuxt、React/Next.js、Angular、Svelte/SvelteKit、Flutter、React Native から選択してください。各オプションでフレームワーク固有のコードと推奨 i18n ライブラリが生成されます。
- 2
オプションを設定する
TypeScript サポートのオン/オフ、お好みのパッケージマネージャー（npm、yarn、pnpm）の選択、プロジェクトでサポートする言語を設定してください。
- 3
生成されたコードをコピー
セットアップコード、インストールコマンド、サンプルロケールファイルをプロジェクトにコピーしてください。生成コードは各フレームワークの公式ベストプラクティスに従っています。
よくある質問
どのフレームワークに対応？
Vue/Nuxt、React/Next.js、Angular、Svelte/SvelteKit、Flutter、React Native に対応。
インストールは必要？
不要です。無料オンラインツールです。
TypeScript と JavaScript を切替え可能？
はい。TypeScript オプションで切替えできます。