# vue: useLocale
URL: https://generaltranslation.com/en-US/docs/vue/reference/composables/use-locale.mdx
---

title: useLocale
description: Read the active locale. API reference for useLocale.

---

The `useLocale` composable returns the installed plugin's active locale as a readonly Vue ref. The value is a locale code such as `en` or `fr-CA`.

## Overview [#overview]

Vue templates unwrap the ref automatically:

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

const locale = useLocale();
</script>

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

In script code, read `locale.value`.

## How it works [#how-it-works]

- With a [`createGT()`](/docs/vue/reference/functions/create-gt) plugin, the ref updates after a successful locale change without reloading the page.
- With a plugin returned by [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa), the locale remains pinned for the current page. [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) saves the new locale and reloads the document, then the next page initialization exposes it.
- Calling the composable without an installed plugin throws an error.

The browser locale cookie is not a reactive event source. Change the locale through [`useSetLocale()`](/docs/vue/reference/composables/use-set-locale) rather than writing `document.cookie` directly.

## Parameters [#parameters]

`useLocale` takes no parameters.

## Returns [#returns]

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

A readonly ref containing the active locale. Vue unwraps it in templates; JavaScript and TypeScript code use `.value`.

```ts
const locale = useLocale();

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

## Example [#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>
```