# vue: gt-vue の設定
URL: https://generaltranslation.com/ja/docs/vue/guides/configuring.mdx
---

title: gt-vue の設定
description: Vue 翻訳プラグインを作成し、カタログを読み込み、ブラウザまたはサーバーレンダリングを設定する方法。
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/storing-translations

---

独立した Vue アプリケーションごとに 1 つのプラグインを作成します。プラグインは、アクティブなロケール、読み込み済みのカタログ、リアクティブな翻訳状態を保持します。

再読み込みなしでロケールを切り替えるアプリやサーバーレンダリングするアプリを含む通常の Vue アプリケーションでは、[`createGT()`](/docs/vue/reference/functions/create-gt) を使用します。モジュールレベルの [`t()`](/docs/vue/reference/functions/t) が必要なブラウザ専用 SPA では、[SPA 翻訳を使用した開発](/docs/vue/guides/developing-spa-translations)で説明されている別の起動方法を使用します。

## プラグインを作成する [#create]

ソースロケールと [`loadTranslations`](/docs/vue/reference/types/load-translations) コールバックを [`createGT()`](/docs/vue/reference/functions/create-gt) に渡し、返されたプラグインを `app.use()` でインストールします。

```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');
```

プラグインは一度だけインストールしてください。別のインスタンスを作成すると、ロケールとカタログのキャッシュがそれぞれ分離されます。

## 初期ロケールを解決する [#initial-locale]

[`createGT()`](/docs/vue/reference/functions/create-gt) は、次の順序で初期ロケールを解決します。

1. 明示的に指定された `locale` オプション。
2. 設定されたロケール cookie のブラウザ上の値。
3. `defaultLocale`。

明示的なロケールは、サーバーレンダリングおよびハイドレーション時に優先されます。ブラウザでは古い cookie を置き換えるため、クライアントはサーバーと同じロケールで開始されます。

```ts
const gt = createGT({
  defaultLocale: 'en',
  locale: serverLocale,
  localeCookieName: 'my-app.locale',
  loadTranslations,
});
```

デフォルトのCookie名は`generaltranslation.locale`です。ルーターまたはサーバーで別のCookieを共有する必要がある場合にのみ、`localeCookieName`を変更してください。

## 翻訳カタログを読み込む [#load]

デフォルトロケールはソースコンテンツから直接レンダリングされるため、ローダーは呼び出されません。その他のロケールは、[`loadTranslations`](/docs/vue/reference/types/load-translations) を通じて読み込まれます。

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

正常に取得されたカタログはプラグインのライフサイクル中キャッシュされ、同じロケールに対する同時リクエストでは1回の読み込みが共有されます。クライアントでは、最初のカタログの読み込み中、アプリはソースコンテンツでマウントできます。カタログの読み込みが完了すると、翻訳済みコンポーネントは再レンダリングされます。

空のオブジェクトを返すと、フォールバックとしてソースコンテンツが使用されます。コールバックが失敗すると、ロケールの変更も失敗し、現在のロケールはそのまま維持されます。

## CLI とランタイムの設定を同期する [#shared-config]

`gt.config.json` を、ソースロケール、ターゲットロケール、生成ファイルの保存先を一元管理する設定ファイルとして使用します。

```json title="gt.config.json"
{
  "defaultLocale": "en",
  "locales": ["es", "fr"],
  "files": {
    "gt": {
      "output": "src/_gt/[locale].json"
    }
  }
}
```

CLI はこのファイルを直接読み取ります。[`createGT()`](/docs/vue/reference/functions/create-gt) は独自のランタイムオプションを受け取るため、`defaultLocale` とローダーを明示的に渡してください。`locales` リストは言語切り替え機能と CLI で引き続き使用しますが、リアクティブプラグインは他のロケールコードを拒否しません。利用可能なロケールは、UI とローダーによって決まります。

本番環境用の API 認証情報は、翻訳を生成する CLI プロセスで使用します。ブラウザコードで `GT_API_KEY` を公開しないでください。

## サーバーレンダリングを設定する [#ssr]

ロケールとカタログの状態がユーザー間で共有されないよう、リクエストごとに新しいプラグインを作成します。リクエストロケールを解決し、明示的に渡したうえで、レンダリング前に対応するカタログを事前に読み込みます。

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

返されたプラグインをリクエストの Vue アプリにインストールします。ブラウザでハイドレーションする前に、同じ明示的なロケールを指定したクライアントプラグインを作成し、事前に読み込みます。ターゲットカタログの準備が整う前にハイドレーションすると、一時的にソースコンテンツが表示され、不整合が発生する可能性があります。
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales
- /docs/vue/guides/storing-translations