# Vue: 設定
URL: https://generaltranslation.com/ja/docs/vue/reference/config.mdx
Docs index: https://generaltranslation.com/llms.txt
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` と `customMapping` はすべての対象で共有され、`locales` は 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) | 翻訳生成時にロケールのエイリアスを適用します。                             | いずれかのランタイムに渡します。[`createGT()`](/docs/vue/reference/functions/create-gt) は、有効な `code` を持つオブジェクトマッピングをフォーマットと複数形ルールに使用します。[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) では、サポート対象ロケールのマッチングにも使用されます。 |

プロジェクト、ファイル、公開、レビュー、ブランチに関するすべてのフィールドについては、[CLI configuration reference](/docs/cli/reference/config) を参照してください。`GT_API_KEY` は CLI 環境で管理してください。本番環境の認証情報を `gt.config.json` やブラウザコードに含めないでください。

## Vue の抽出 [#vue-extraction]

Vue のテンプレートコンパイラー設定は、抽出されるコンテンツとその translation hash に影響します。エクストラクターは既定で、有効な Vite または Nuxt の設定からこれらの設定を検出します。自動検出があいまいな場合や、アプリケーションでカスタム値を使用している場合は、明示的に設定してください。

| オプション                                                | 説明                                        | Type                       | 任意 | デフォルト                     |
| ----------------------------------------------------- | ----------------------------------------- | -------------------------- | -- | --------------------------- |
| `files.gt.parsingFlags.vueCompilerOptions.whitespace` | Vue のテンプレートの空白処理に合わせます。                   | `'condense' \| 'preserve'` | はい | 検出された設定、なければ Vue の既定値       |
| `files.gt.parsingFlags.vueCompilerOptions.delimiters` | カスタムのテンプレート interpolation 区切り文字に合わせます。    | `[string, string]`         | はい | 検出された設定、なければ `['{{', '}}']` |
| `files.gt.parsingFlags.viteConfigPath`                | プロジェクトルート からの相対パスで Vite の設定を 1 つ選択します。 | `string`                   | はい | 自動検出                        |

```json title="gt.config.json"
{
  "files": {
    "gt": {
      "parsingFlags": {
        "vueCompilerOptions": {
          "whitespace": "preserve",
          "delimiters": ["${", "}"]
        },
        "viteConfigPath": "config/vite.app.ts"
      }
    }
  }
}
```

これらの値は、アプリケーションのコンパイラーと同一に保ってください。空白や区切り文字を変更すると、ソースコンテンツが変化し、既存のtranslation hashが無効になる場合があります。

TypeScriptやJavaScriptのパスエイリアスを使用する場合は、config fileをCLIに渡します:

```bash
npx gt translate --tsconfig config/tsconfig.app.json
```

`--tsconfig` とそのエイリアスである `--jsconfig` はコマンドラインオプションであり、`gt.config.json` のフィールドではありません。省略した場合は、抽出時に最も近い config が自動的に検出されます。

## ランタイム オプション [#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`    | [`createGT()`](/docs/vue/reference/functions/create-gt) | [`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) で翻訳します。

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.