# vue: createGT
URL: https://generaltranslation.com/ja/docs/vue/reference/functions/create-gt.mdx
---

title: createGT
description: リアクティブなロケール状態とカタログキャッシュを持つ、独立した Vue 翻訳プラグインを作成します。createGT の API リファレンス。

---

呼び出しごとに、独立したロケール状態、進行中の読み込み、キャッシュ済みカタログが作成されます。通常のクライアントアプリケーションで使用し、サーバーサイドレンダリングではリクエストごとに 1 つのインスタンスを作成してください。

## 概要 [#overview]

```ts
function createGT(options?: CreateGTOptions): GTPlugin;
```

[`createGT()`](#overview) はすぐに戻り値を返します。`app.use()` でプラグインをインストールするか、レンダリング前に返された [`GTPlugin`](/docs/vue/reference/types/gt-plugin) を使用してロケールを事前読み込みしてください。

```ts
import { createApp } from 'vue';
import { createGT } from 'gt-vue';
import App from './App.vue';

const gt = createGT({
  defaultLocale: 'en',
  loadTranslations: async (locale) =>
    (await import(`./_gt/${locale}.json`)).default,
});

createApp(App).use(gt).mount('#app');
```

## パラメータ [#parameters]

| パラメータ     | 説明                         | 型                                                                | 任意 | デフォルト |
| --------- | -------------------------- | ---------------------------------------------------------------- | -- | ----- |
| `options` | 初期ロケール、cookie、カタログローダーの設定。 | [`CreateGTOptions`](/docs/vue/reference/types/create-gt-options) | はい | `{}`  |

`options` オブジェクトには、次のフィールドを指定できます。

| オプション              | 説明                                  | 型                                                                 | 任意 | デフォルト                       |
| ------------------ | ----------------------------------- | ----------------------------------------------------------------- | -- | --------------------------- |
| `defaultLocale`    | ソースロケールおよび代替ロケール。                   | `string`                                                          | はい | `en`                        |
| `loadTranslations` | 非同期のターゲットカタログローダー。                  | [`LoadTranslations`](/docs/vue/reference/types/load-translations) | はい | 空のカタログ                      |
| `locale`           | 明示的に指定する初期ロケール。ブラウザのcookieより優先されます。 | `string`                                                          | はい | Cookie、その後 `defaultLocale`  |
| `localeCookieName` | ロケールを保持するために使用するブラウザcookie。         | `string`                                                          | はい | `generaltranslation.locale` |

デフォルトロケールでは常にソースコンテンツがレンダリングされるため、そのローダーが呼び出されることはありません。[`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) とは異なり、[`createGT()`](#overview) は `locales` の許可リストや `customMapping` を受け付けません。使用可能なロケールコードは、呼び出し元とローダーによって決まります。

## 戻り値 [#returns]

**型** [`GTPlugin`](/docs/vue/reference/types/gt-plugin)

返されるプラグインには、`install()`、`getLocale()`、`loadTranslations()`、`setLocale()` が用意されています。命令型メソッドで使用するものと同じインスタンスをインストールしてください。

このプラグインは、[`t()`](/docs/vue/reference/functions/t) が使用するブラウザのグローバル状態には接続されません。モジュールレベルでの翻訳が必要なクライアントアプリケーションでは、代わりに [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) が返すプラグインそのものをインストールする必要があります。

## 仕組み [#how-it-works]

* **初期ロケール:** 明示的に指定された `locale` はブラウザの cookie より優先され、cookie は `defaultLocale` より優先されます。サーバーにはブラウザの cookie はありません。ブラウザでは、hydration の一貫性を保つため、明示的に指定されたロケールも cookie に書き込まれます。
* **初期読み込み:** `app.use(gt)` はマウントをブロックせずに、アクティブな対象ロケールの読み込みを開始します。カタログ が到着するまではソースコンテンツがレンダリングされ、到着後は参照を行ったコンシューマーが再レンダリングされます。
* **キャッシュ:** 正常に読み込まれた カタログ は、プラグインの存続期間中キャッシュされます。同じロケールに対する同時リクエストは、1 つの promise を共有します。デフォルトロケールはソーステキストで表現され、空の カタログ としてすでにキャッシュされています。
* **ロケールの変更:** `setLocale(locale)` は、cookie とリアクティブなコンシューマーを更新する前に、キャッシュされていない カタログ を読み込みます。ロケールリクエストが重複した場合、アクティブなロケールを変更するのは最新のリクエストだけです。先行するリクエストで正常に読み込まれた カタログ は、引き続きキャッシュされます。
* **外部からの cookie の変更:** `getLocale()` は現在のブラウザ cookie を読み取ります。ブラウザはリアクティブな cookie 変更イベントを発生させないため、`document.cookie` を直接変更してもレンダリングはスケジュールされません。プラグインの setter または [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) を呼び出してください。

ローダー が拒否した場合、プラグインは `gt-vue` の診断情報をログに記録し、エラーを再スローします。また、失敗はキャッシュしません。`setLocale()` が拒否された場合は、以前のロケールと cookie が維持されます。`install()` によって開始されたバックグラウンド読み込みでは失敗がログに記録されますが、アプリがソースコンテンツをレンダリングし続けられるよう、rejection は捕捉されます。

## サーバーサイドレンダリング [#server-rendering]

リクエストごとに新しいプラグインを作成し、リクエストロケールを明示的に渡します。レンダリング前に `loadTranslations(locale)` または `setLocale(locale)` を await します。

```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;
}
```

このプラグインを複数のリクエストで共有しないでください。ロケールとカタログキャッシュは、1つのアプリケーションインスタンスに紐づきます。hydration の前に、同じ明示的なロケールを指定したクライアントプラグインを作成してプリロードしてください。未ロードのカタログに対して hydration を行うと、ソースコンテンツがレンダリングされ、不一致が発生する可能性があります。

## 例 [#example]

ホストアプリケーション側でロケールの変更を制御する場合は、コンポーネントの外部で返されたプラグインメソッドを使用します。

```ts
const gt = createGT({ defaultLocale: 'en', loadTranslations });

await gt.loadTranslations('fr'); // ロケールを変更せずにプリロード
await gt.setLocale('fr'); // キャッシュ済みのカタログを使い、コンシューマーを再レンダリング

console.log(gt.getLocale()); // "fr"
```