# vue: 設定 URL: https://generaltranslation.com/ja/docs/vue/reference/config.mdx --- title: 設定 description: Vue アプリケーションのカタログ生成とランタイムの初期化を設定します。Vue の設定リファレンス。 --- 設定は、互いに独立した 2 つのコンポーネントで使用されます。`gt` CLI は `gt.config.json` を読み取り、ソースコンテンツを見つけてカタログを書き込みます。一方、アプリケーションはランタイムオプションを [`createGT()`](/docs/vue/reference/functions/create-gt) または [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) に渡します。 `gt-vue` は `gt.config.json` を自動的に検出・読み込みしません。共有する値は明示的にインポートし、[`loadTranslations`](/docs/vue/reference/types/load-translations) などの関数はアプリケーションコードで指定してください。 ## 概要 [#overview] | 対象 | 目的 | 設定 | | ---------------------------------------------------------------------- | -------------------------------------------------------------------------------------- | ------------------------------------------------------------------------------------------------ | | `gt.config.json` | ソースコンテンツを抽出し、翻訳カタログを生成します。 | `projectId`、`defaultLocale`、`locales`、`src`、`files`、`customMapping` など、JSON にシリアル化可能な CLI フィールド。 | | [`createGT()`](/docs/vue/reference/functions/create-gt) | リアクティブなクライアントレンダリングまたはリクエストスコープのサーバーレンダリング用に、独立したプラグインを作成します。 | [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) | | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | モジュールレベルの [`t()`](/docs/vue/reference/functions/t) で使用するブラウザグローバルなプラグインを作成し、事前に読み込みます。 | [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options) | CLI 専用フィールドの `projectId`、`src`、`files` はランタイムでは無視されます。ランタイム専用フィールドの `locale`、`localeCookieName`、`loadTranslations` は、JSON で完全には表現できません。`defaultLocale` はすべての対象で共有されます。`locales` と `customMapping` は SPA 初期化関数でも使用できます。 ## `gt.config.json` [#config-file] `gt.config.json` をプロジェクトルートに配置します。この Vue 設定では、明示的に指定したソース glob をスキャンし、対象ロケールごとに 1 つのカタログを生成します。 ```json title="gt.config.json" { "$schema": "https://assets.gtx.dev/config-schema.json", "defaultLocale": "en", "locales": ["es", "fr"], "src": ["src/**/*.{vue,js,jsx,mjs,cjs,ts,tsx,mts,cts}"], "files": { "gt": { "output": "src/_gt/[locale].json" } } } ``` `src` エントリはグロブパターンです。`"src"` のようにディレクトリだけを指定しても、ファイルを再帰的に一致させる指定にはなりません。CLI でスキャンするファイルと拡張子を含めてください。`src` を省略した場合、Vue のデフォルトではルートの単一ファイルコンポーネントと、一般的な Vue および Nuxt のディレクトリが対象になります。 | フィールド | Vue での用途 | ランタイム での用途 | | ------------------------------------------------------------ | --------------------------------------------------- | --------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | | `$schema` | エディタの検証と補完を有効にします。 | なし | | `projectId` | CLI で使用する General Translation プロジェクトを選択します。 | なし | | [`defaultLocale`](/docs/cli/reference/config#default-locale) | ソースロケールを宣言します。 | いずれかの ランタイム 初期化関数に渡します。 | | [`locales`](/docs/cli/reference/config#locales) | CLI が生成するターゲットロケールを宣言します。 | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) に渡すと、サポートされていない保存済みまたは要求されたロケールを拒否できます。[`createGT()`](/docs/vue/reference/functions/create-gt) プラグインではロケールコードは制限されません。 | | [`src`](/docs/cli/reference/config#src) | 抽出対象の Vue、JavaScript、TypeScript のソースファイルを選択します。 | なし | | [`files.gt.output`](/docs/cli/reference/config#files) | 生成されるカタログのパスを設定します。`[locale]` プレースホルダーはそのまま残してください。 | ローダーが同じディレクトリからインポートするようにします。 | | [`customMapping`](/docs/cli/reference/config#custom-mapping) | 翻訳生成時にロケールのエイリアスを適用します。 | 有効な `code` を持つオブジェクトマッピングでロケールのマッチングとフォーマッタのロケール解決を行えるよう、[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) に渡します。 | プロジェクト、ファイル、公開、レビュー、ブランチに関するすべてのフィールドについては、[CLI configuration reference](/docs/cli/reference/config) を参照してください。`GT_API_KEY` は CLI 環境で管理してください。本番環境の認証情報を `gt.config.json` やブラウザコードに含めないでください。 ## ランタイム オプション [#runtime-options] | オプション | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | デフォルト | | ------------------ | ------------------------------------------------------- | ---------------------------------------------------------------------- | ------------------------------- | | `defaultLocale` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | `en` | | `loadTranslations` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | 空のカタログ | | `locale` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | ブラウザの cookie、次に `defaultLocale` | | `localeCookieName` | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | `generaltranslation.locale` | | `locales` | いいえ | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | 制限なし | | `customMapping` | いいえ | [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) | なし | オプションの完全な仕様については、[`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) と [`InitializeGTSPAOptions`](/docs/vue/reference/types/initialize-gt-spa-options) を参照してください。SPA イニシャライザには `{ ...gtConfig, loadTranslations }` を渡せます。重複するフィールドは使用され、ランタイム ではその他の CLI フィールドは無視されます。 ## カタログの読み込み [#catalog-loading] `output` パスとローダーのパスは、同じファイルを指している必要があります。 ```ts title="src/loadTranslations.ts" import type { LoadTranslations } from 'gt-vue'; const loadTranslations: LoadTranslations = async (locale) => { try { return (await import(`./_gt/${locale}.json`)).default; } catch { return {}; } }; export default loadTranslations; ``` デフォルトロケールではソーステキストが使用され、ローダー は呼び出されません。正常に取得されたターゲットカタログはプラグインごとにキャッシュされ、同一ロケールへの同時リクエストは Promise を共有します。ローダー 呼び出しが失敗した場合はログに記録され、再スローされます。キャッシュされないため、後続の呼び出しで再試行できます。 [`createGT()`](/docs/vue/reference/functions/create-gt) プラグインをインストールすると、初回ロードがバックグラウンドで開始され、カタログが到着するまでソースコンテンツがレンダリングされます。一方、[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) は、初回ロードが完了するまで待機してから返ります。 ## リアクティブなセットアップ [#reactive-setup] 通常のクライアントアプリケーションでは、[`createGT()`](/docs/vue/reference/functions/create-gt) を使用します。`locales`、`src`、`files` は [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) に含まれないため、ランタイムフィールドは明示的に渡します。 ```ts title="src/main.ts" import { createApp } from 'vue'; import { createGT } from 'gt-vue'; import App from './App.vue'; import gtConfig from '../gt.config.json'; import loadTranslations from './loadTranslations'; const gt = createGT({ defaultLocale: gtConfig.defaultLocale, loadTranslations, }); createApp(App).use(gt).mount('#app'); ``` サーバーサイドレンダリングでは、リクエストごとに新しいプラグインを作成し、リクエストのロケールを明示的に渡してから、レンダリング前にプリロードします。 ```ts title="src/gt-server.ts" import { createGT } from 'gt-vue'; import loadTranslations from './loadTranslations'; export async function createRequestGT(locale: string) { const gt = createGT({ defaultLocale: 'en', locale, loadTranslations }); await gt.loadTranslations(locale); return gt; } ``` クライアントをハイドレートする前に、同じ明示的なロケールと事前に読み込んだカタログを使用します。共有のサーバープラグインでは、リクエスト間でロケールとカタログの状態が漏洩する可能性があります。 ## ブラウザ SPA [#browser-spa] モジュールスコープで [`t()`](/docs/vue/reference/functions/t) を呼び出すブラウザ専用のシングルページアプリケーションでのみ、[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) を使用してください。アプリケーションモジュールを動的にインポートする前に初期化が完了するのを待ち、返されたプラグインをそのままインストールしてください。 ```ts title="src/index.ts" import { initializeGTSPA } from 'gt-vue'; import gtConfig from '../gt.config.json'; import loadTranslations from './loadTranslations'; async function bootstrap() { const gt = await initializeGTSPA({ ...gtConfig, loadTranslations }); const { mount } = await import('./main'); mount(gt); } void bootstrap().catch((error: unknown) => { console.error(error); }); ``` 最初の呼び出しがページ全体のランタイムを担います。ロケールを変更するとcookieが更新され、ドキュメントが再読み込みされるため、新たにプリロードされたcatalogを使ってモジュールレベルでの翻訳が再度実行されます。再読み込みせずにリアクティブにロケールを変更するには、[`createGT()`](/docs/vue/reference/functions/create-gt) を使用し、コンポーネント内の文字列は [`useGT()`](/docs/vue/reference/composables/use-gt) で翻訳します。