# vue: useGT
URL: https://generaltranslation.com/en-GB/docs/vue/reference/composables/use-gt.mdx
---

title: useGT
description: Get a function for translating strings inline. API reference for useGT.

---

The `useGT` composable returns a synchronous lookup function for plain strings from the catalogue. Use it for labels, placeholders and other standalone strings within a Vue component.

## Overview [#overview]

Call `useGT` during component setup, then call the returned function from the template or another reactive effect:

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

const gt = useGT();
</script>

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

Use [`<T>`](/docs/vue/reference/components/t) instead when text and nested markup should form a single rich translation. Use [`t()`](/docs/vue/reference/functions/t) for module-level strings in a browser-only SPA.

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

* **Synchronous lookup.** The returned function hashes the source string and optional context, then reads the active plugin&#39;s loaded catalogue.
* **Source fallback.** A missing entry or an entry with an invalid catalogue shape returns the original string.
* **Plain strings only.** Braces remain literal. The function does not support ICU syntax, interpolation variables, `$id`, `$maxChars`, or `$format`.
* **Plugin scope.** Call the composable from a component under the plugin returned by [`createGT()`](/docs/vue/reference/functions/create-gt) or [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa). Calling it without an installed plugin throws an error. A request-scoped [`createGT()`](/docs/vue/reference/functions/create-gt) plugin also supports server-rendered components.

The extractor requires a statically analyzable string, such as a string literal, a template literal without expressions, or an immutable identifier that resolves to one. Context must also be static so that the generated catalogue and runtime hash agree.

## Parameters [#parameters]

`useGT` takes no parameters.

## Returns [#returns]

**Type** `(message: string, options?: GTStringOptions) => string`

A synchronous function with these parameters:

| Parameter             | Description                              | Type                                                             | Optional | Default |
| --------------------- | ---------------------------------------- | ---------------------------------------------------------------- | -------- | ------- |
| [`message`](#message) | Static source string to translate.       | `string`                                                         | No       | —       |
| [`options`](#options) | Context used to disambiguate the source. | [`GTStringOptions`](/docs/vue/reference/types/gt-string-options) | Yes      | `{}`    |

### `message`

**Type** `string` · **Required**

The static source string registered by the extractor and looked up at runtime.

### `options`

**Type** [`GTStringOptions`](/docs/vue/reference/types/gt-string-options) · **Optional** · **Default** `{}`

The only supported field is `$context?: string`. It changes the catalogue identity, allowing identical source strings to have different translations.

```vue
<button>{{ gt('Open', { $context: 'Verb: open the settings panel' }) }}</button>
```

## Reactivity [#reactivity]

The returned function reads the reactive catalogue and locale state when called. A template expression reruns automatically:

```vue
<p>{{ gt('Hello World') }}</p>
```

For a value created in setup, wrap the call in `computed`:

```ts
import { computed } from 'vue';

const gt = useGT();
const message = computed(() => gt('Hello World'));
```

Calling it once creates a plain string snapshot:

```ts
const gt = useGT();
const message = gt('Hello World');
```

With a [`createGT()`](/docs/vue/reference/functions/create-gt) plugin, that snapshot does not update when the initial catalogue finishes loading or the locale changes. A browser SPA initialised with [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) preloads before components run and reloads the page when the locale changes, so setup-time snapshots are recreated with the loaded locale.

## Example [#example]

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

const gt = useGT();
const emptyMessage = computed(() =>
  gt('No results', { $context: 'Empty search results' })
);
</script>

<template>
  <form>
    <input :placeholder="gt('Search products')" />
    <p>{{ emptyMessage }}</p>
  </form>
</template>
```