# vue: <Var>
URL: https://generaltranslation.com/ja/docs/vue/reference/components/var.mdx
---

title: "<Var>"
description: 動的な値を翻訳せずに翻訳内でレンダリングします。<Var> コンポーネントの API リファレンス。

---

`<Var>` コンポーネントは、デフォルトスロットのコンテンツを単一の不透明なランタイム値として扱います。周囲のリッチテキスト翻訳では、内容を翻訳に送信せずにこの値を移動できます。

## 概要 [#overview]

変更せずにレンダリングしたい値を、[`<T>`](/docs/vue/reference/components/t) 内の `<Var>` で囲みます。

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

ロケールに応じて数値、通貨、日付を表示するには、フォーマットコンポーネントを使用します。

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

* **不透明な値。** 抽出機能は、スロットの実行時コンテンツではなく、変数プレースホルダーを記録します。
* **安定した挿入。** アクティブなリッチ翻訳では、対象言語に応じて必要な位置にプレースホルダーを配置でき、Vue がそこへ元のスロットコンテンツを再挿入します。
* **フラグメント出力。** このコンポーネントは HTML ラッパーを追加せず、スロット内の子要素が 0 個、1 個、または複数個の場合もそのまま保持します。

`<Var>` は意図的に子要素専用です。`name` または `value` props は受け付けず、フォールスルー属性やリスナーはその子要素には適用されません。

## スロット [#slots]

| スロット                       | 説明                   | 型            | 任意 | デフォルト |
| -------------------------- | -------------------- | ------------ | -- | ----- |
| [`default`](#default-slot) | 翻訳せずに保持するランタイムコンテンツ。 | `VNodeChild` | はい | 空     |

### デフォルトスロット

**型** `VNodeChild` · **任意** · **デフォルト** 空

そのままレンダリングするコンテンツ。テキスト、補間、要素、または別のコンポーネントを指定できます。

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

アクティブなロケールに応じて値を整形する場合は、[`<Num>`](/docs/vue/reference/components/num)、[`<Currency>`](/docs/vue/reference/components/currency)、または [`<DateTime>`](/docs/vue/reference/components/datetime) を使用してください。