# vue: <Var>
URL: https://generaltranslation.com/en-GB/docs/vue/reference/components/var.mdx
---
title: "<Var>"
description: Render a dynamic value within a translation without translating it. API reference for the <Var> component.

---

The `<Var>` component treats its default-slot content as a single opaque runtime value. The surrounding rich translation can move this value without sending its contents for translation.

## Overview [#overview]

Place `<Var>` inside [`<T>`](/docs/vue/reference/components/t) around a value that should render unchanged:

```vue
<T>Your name is <Var>{{ user.name }}</Var>.</T>
```

Use the formatting components for locale-aware numbers, currencies and dates.

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

* **Opaque value.** The extractor records a variable placeholder instead of the slot&#39;s runtime contents.
* **Stable insertion.** The active rich translation can place the placeholder wherever the target language requires, and Vue reinserts the original slot content there.
* **Fragment output.** The component adds no HTML wrapper and preserves zero, one, or several slot children.

`<Var>` is intentionally child-only. It does not accept `name` or `value` props, and fallthrough attributes and listeners are not applied to its children.

## Slots [#slots]

| Slot                       | Description                                      | Type         | Optional | Default |
| -------------------------- | ------------------------------------------------ | ------------ | -------- | ------- |
| [`default`](#default-slot) | Runtime content to preserve without translating. | `VNodeChild` | Yes      | Empty   |

### Default slot

**Type** `VNodeChild` · **Optional** · **Default** Empty

Content to render unchanged. It can be text, an interpolation, an element, or another component.

## Examples [#examples]

```vue title="AccountSummary.vue"
<script setup lang="ts">
import { T, Var } from 'gt-vue';

defineProps<{ accountName: string; apiKey: string }>();
</script>

<template>
  <T>
    Account: <Var>{{ accountName }}</Var>
    <br />
    API key: <Var><code>{{ apiKey }}</code></Var>
  </T>
</template>
```

For values that should be formatted for the active locale, use [`<Num>`](/docs/vue/reference/components/num), [`<Currency>`](/docs/vue/reference/components/currency), or [`<DateTime>`](/docs/vue/reference/components/datetime) instead.