# vue: クイックスタート
URL: https://generaltranslation.com/ja/docs/vue/quickstart.mdx
---

title: クイックスタート
description: General Translation を使用して、10 分以内に Vue アプリケーションに複数の言語を追加します。
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales
    - /docs/vue/guides/storing-translations

---

このガイドを終えると、Vue アプリで複数の言語のコンテンツを表示し、ユーザーがページを再読み込みせずにアクティブなロケールを変更できるようになります。

`gt-vue` は Vue プラグインとして動作します。このプラグインは各翻訳カタログを一度だけ読み込んでキャッシュし、ロケールが変更されると翻訳済みコンテンツをリアクティブに再レンダリングします。

**前提条件:**

* バージョン 3.3 以降の Vue 3 アプリケーション
* Node.js 18+

## クイックスタート [#quickstart]

### 1. パッケージをインストールする

`gt-vue` はアプリ内の翻訳を実現します。[`gt`](/docs/cli/quickstart) はソースコンテンツを抽出し、翻訳カタログを生成します。

<Tabs items={['npm', 'yarn', 'bun', 'pnpm']}>
  <Tab value="npm">
    ```bash
    npm install gt-vue
    npm install --save-dev gt
    ```
  </Tab>

  <Tab value="yarn">
    ```bash
    yarn add gt-vue
    yarn add --dev gt
    ```
  </Tab>

  <Tab value="bun">
    ```bash
    bun add gt-vue
    bun add --dev gt
    ```
  </Tab>

  <Tab value="pnpm">
    ```bash
    pnpm add gt-vue
    pnpm add --save-dev gt
    ```
  </Tab>
</Tabs>

### 2. 翻訳設定ファイルを作成する

プロジェクトルートに `gt.config.json` を作成します。ソースのロケール、翻訳先のロケール、生成されるカタログの `output` パスを設定します。

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

* `defaultLocale` はソースコンテンツの言語です。
* `locales` には対象言語を指定します。[サポートされているロケールの一覧](/docs/platform/dashboard/reference/supported-locales)から任意のロケールを選択してください。
* `files.gt.output` は、各カタログの出力先を CLI に指定します。パス内の `[locale]` プレースホルダーはそのままにしてください。

### 3. 翻訳ローダーを作成する

指定したロケールの生成済みカタログを返すローダーを作成します。

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

デフォルトロケールでは、ソースコンテンツ自体がすでにカタログであるため、ローダーは呼び出されません。空のオブジェクトを返すことで、ターゲットカタログを利用できない場合でも、アプリはソースコンテンツをレンダリングできます。

### 4. プラグインを登録する

[`createGT()`](/docs/vue/reference/functions/create-gt) プラグインを 1 つ作成し、アプリをマウントする前にインストールします：

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

プラグインは、保存済みのロケール cookie があればそれを使用し、なければ `defaultLocale` を使用します。まずソースコンテンツでマウントされ、リクエストしたカタログの読み込みが完了するとリアクティブに更新されます。

### 5. コンテンツを翻訳対象として指定する

リッチなテンプレートコンテンツには [`<T>`](/docs/vue/reference/components/t) を、入力属性などのスタンドアロン文字列には [`useGT()`](/docs/vue/reference/composables/use-gt) を使用します。

```vue title="src/App.vue"
<script setup lang="ts">
import { T, useGT } from 'gt-vue';

const gt = useGT();
</script>

<template>
  <main>
    <T>
      <h1>Welcome to my app</h1>
      <p>This content will be translated automatically.</p>
    </T>

    <input :placeholder="gt('Search products')" />
  </main>
</template>
```

[`<T>`](/docs/vue/reference/components/t) 内のコンテンツは静的に保ちます。実行時の値や条件に応じた代替には、[変数および分岐コンポーネント](/docs/vue/guides/formatting-variables)を使用します。

### 6. 言語切り替え機能を追加する

[`useLocale()`](/docs/vue/reference/composables/use-locale) で現在のロケールを取得し、[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) で変更します。

```vue title="src/App.vue"
<script setup lang="ts">
import { T, useGT, useLocale, useSetLocale } from 'gt-vue';
import gtConfig from '../gt.config.json';

const gt = useGT();
const locale = useLocale();
const setLocale = useSetLocale();
const locales = [gtConfig.defaultLocale, ...gtConfig.locales];

async function changeLocale(event: Event) {
  const target = event.target as HTMLSelectElement;
  await setLocale(target.value);
}
</script>

<template>
  <main>
    <label>
      Language
      <select :value="locale" @change="changeLocale">
        <option v-for="code in locales" :key="code" :value="code">
          {{ code }}
        </option>
      </select>
    </label>

    <T>
      <h1>Welcome to my app</h1>
      <p>This content will be translated automatically.</p>
    </T>

    <input :placeholder="gt('Search products')" />
  </main>
</template>
```

[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) は、不足しているカタログを読み込んだ後、ロケールの cookie を保存し、リアクティブなコンシューマーを再レンダリングします。上記のローダー では、ファイルが見つからない場合は空のカタログが返され、ロケールが変更されてソースコンテンツがレンダリングされます。一方、ローダー が reject された場合は、現在のロケールが引き続き有効です。

### 7. 認証して翻訳する

General Translation に認証します：

```bash
npx gt auth
```

このコマンドの案内に従ってサインインし、認証情報を作成します。生成された本番用の API キーはローカルの環境ファイルに保存し、ブラウザコードやバージョン管理には含めないでください。

次に、翻訳カタログを生成します。

```bash
npx gt translate
```

CLI は Vue のソースをスキャンして抽出したコンテンツを翻訳し、対象ロケールごとに JSON ファイルを 1 つ `src/_gt/` に書き出します。ソースコンテンツを変更したら、その都度コマンドを再実行してください。

## トラブルシューティング [#troubleshooting]

<Accordions>
  <Accordion title="アプリがソースロケールのままになる">
    アクティブなロケールは `generaltranslation.locale` Cookie に保存されます。古い Cookie を削除してから、対象ロケールを再度選択してください。また、対応する JSON ファイルが `src/_gt/` に存在し、ローダー がそのデフォルトエクスポートを返すことも確認してください。
  </Accordion>

  <Accordion title="ロケールを変更しても翻訳対象の文字列が更新されない">
    template または Vue の算出プロパティから、[`useGT()`](/docs/vue/reference/composables/use-gt) が返す関数を呼び出してください。setup 中に一度翻訳された文字列はスナップショットであり、リアクティブなロケールの状態が変わっても再実行されません。
  </Accordion>
</Accordions>
## Next steps

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