# vue: useLocale
URL: https://generaltranslation.com/ja/docs/vue/reference/composables/use-locale.mdx
---
title: useLocale
description: アクティブなロケールを取得します。useLocale の API リファレンス。

---

`useLocale` コンポーザブルは、インストールされているプラグインのアクティブなロケールを読み取り専用の Vue ref として返します。値は `en` や `fr-CA` などのロケールコードです。

## 概要 [#overview]

Vue テンプレートでは、ref は自動的にアンラップされます。

```vue
<script setup lang="ts">
import { useLocale } from 'gt-vue';

const locale = useLocale();
</script>

<template>
  <p>Current locale: {{ locale }}</p>
</template>
```

スクリプトコード内で、`locale.value` を読み取ります。

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

* [`createGT()`](/docs/vue/reference/functions/create-gt) プラグインでは、ページを再読み込みすることなく、ロケールの変更に成功すると ref が更新されます。
* [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) が返すプラグインでは、現在のページではロケールが固定されたままです。[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) は新しいロケールを保存してドキュメントを再読み込みし、次回のページ初期化時にそのロケールが反映されます。
* プラグインがインストールされていない状態で コンポーザブル を呼び出すと、エラーがスローされます。

ブラウザのロケール cookie はリアクティブなイベントソースではありません。`document.cookie` に直接書き込むのではなく、[`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) を使用してロケールを変更してください。

## パラメータ [#parameters]

`useLocale` はパラメータを受け取りません。

## 戻り値 [#returns]

**Type** `Readonly<Ref<string>>`

アクティブなロケールを保持する読み取り専用の ref。Vue ではテンプレート内で自動的にアンラップされます。JavaScript および TypeScript のコードでは `.value` を使用します。

```ts
const locale = useLocale();

console.log(locale.value);
```

## 例 [#example]

```vue title="CurrentLocale.vue"
<script setup lang="ts">
import { computed } from 'vue';
import { useLocale } from 'gt-vue';

const locale = useLocale();
const language = computed(() => locale.value.split('-')[0]);
</script>

<template>
  <p>Locale: {{ locale }}</p>
  <p>Language: {{ language }}</p>
</template>
```