# vue: t
URL: https://generaltranslation.com/en-GB/docs/vue/reference/functions/t.mdx
---

title: t
description: Translate a plain string synchronously from the initialised browser SPA runtime. API reference for t.

---

Use `t` for constants and other strings evaluated outside Vue components in a browser-only single-page application. Component code normally uses the reactive [`useGT()`](/docs/vue/reference/composables/use-gt) callback instead.

## Overview [#overview]

```ts
const t: GTFunction;
```

The function reads the catalogue preloaded by [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa):

```ts title="src/navigation.ts"
import { t } from 'gt-vue';

export const navigation = [
  t('Documentation', { $context: 'primary navigation' }),
  t('Account settings'),
];
```

Use literal source strings and a literal `$context` so the CLI can extract the same catalogue entry that the runtime hashes.

## Parameters [#parameters]

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

`$context` is the only supported option. `t` does not accept interpolation variables, `$format`, `$maxChars`, or `$requiresReview`.

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

`t` calculates the plain `STRING` catalogue hash from `message` and `$context`, then synchronously reads the active SPA catalogue. It returns the source string if the hash is missing or the catalogue value is not a string.

The result is a snapshot produced when the call runs. A module-level constant does not participate in Vue reactivity. SPA locale changes therefore reload the document, rerun the bootstrap, preload the new catalogue, and evaluate the module again.

This API performs literal string lookup only:

* Braces such as `{name}` are ordinary characters.
* ICU syntax is not parsed or formatted.
* Runtime values are not interpolated.
* Tagged-template syntax such as `` t`Hello` `` is not supported.

Use [`<T>`](/docs/vue/reference/components/t) with [`<Var>`](/docs/vue/reference/components/var) for translatable content containing runtime values.

## Return value [#returns]

**Type** `string`

Returns the matching string translation, or `message` if no string translation exists.

## Failures [#failures]

`t` throws in either of these cases:

* It runs on the server, where browser-global translation state could leak between requests.
* It runs in the browser before [`initializeGTSPA()`](/docs/vue/reference/functions/initialize-gt-spa) has finished.

Await the initialiser in a bootstrap module, then dynamically import modules that call `t`. For server-side rendering, install request-scoped [`createGT({ locale })`](/docs/vue/reference/functions/create-gt#server-rendering) state and translate from a component using [`useGT()`](/docs/vue/reference/composables/use-gt).

## Example [#example]

```ts title="src/status.ts"
import { t } from 'gt-vue';

export const STATUS_LABELS = {
  draft: t('Draft', { $context: 'document status' }),
  published: t('Published', { $context: 'document status' }),
};
```

The extractor registers both calls. When the active catalogue is unavailable or contains neither entry, the values are `"Draft"` and `"Published"`.