# vue: <Branch>
URL: https://generaltranslation.com/en-GB/docs/vue/reference/components/branch.mdx
---
title: "<Branch>"
description: Render content conditionally based on a value. API reference for the <Branch> component.

---

The `<Branch>` component converts its `branch` value to a string and renders the named slot with that name. Place it inside [`<T>`](/docs/vue/reference/components/t) when its alternatives need to be translated.

## Overview [#overview]

Provide a branch value and statically named slots for its possible values:

```vue
<Branch :branch="status">
  <template #active><p>The account is active.</p></template>
  <template #paused><p>The account is paused.</p></template>
  <template #default><p>The account status is unknown.</p></template>
</Branch>
```

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

* **Value matching.** String, number, and boolean values are converted with `toString()`. The corresponding named slot renders.
* **Fallback.** Because the prop accepts booleans, Vue treats an omitted `branch` as `false`; a `false` slot renders when provided. Any value without a matching branch renders the default slot. The component adds no HTML wrapper.
* **Static extraction.** Inside [`<T>`](/docs/vue/reference/components/t), every supported named slot is extracted for translation while runtime rendering selects only the active one.
* **Slot precedence.** A named slot takes precedence over a static primitive attribute with the same name.

## Props and slots [#props]

| Name                       | Description                               | Type                          | Optional | Default |
| -------------------------- | ----------------------------------------- | ----------------------------- | -------- | ------- |
| [`branch`](#branch)        | Value used to select a named branch.      | `string \| number \| boolean` | Yes      | `false` |
| [`default`](#default-slot) | Content rendered when no branch matches.  | `VNodeChild`                  | Yes      | Empty   |
| [`[value]`](#value-slots)  | Content for one stringified branch value. | `VNodeChild`                  | Yes      | —       |

### `branch`

**Type** `string | number | boolean` · **Optional** · **Default** `false`

The value used for selection. For example, `true` selects a slot named `true`, and `2` selects a slot named `2`. Omitting the prop behaves like `:branch="false"`: it selects a slot named `false` when one exists, then falls back to the default slot.

### Default slot

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

Content rendered when no branch slot or supported branch attribute matches the selected value.

### Value slots

**Type** `VNodeChild` · **Optional**

Each statically named slot represents one possible stringified value. Inside [`<T>`](/docs/vue/reference/components/t), slots must be unconditional, statically named and unscoped; dynamic slot names and directives that change the source shape are not supported.

Static primitive attributes can define simple branches without slots:

```vue
<Branch :branch="tone" formal="Welcome" casual="Hi" />
```

Named slots take precedence when both forms use the same name. Presentation attributes such as `class`, `style`, `data-*`, `aria-*`, and listeners are not treated as branch content.

## Examples [#examples]

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

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

<template>
  <T>
    <Branch :branch="plan">
      <template #free><p>Upgrade to unlock more features.</p></template>
      <template #pro>
        <p>Thanks for going Pro, <Var>{{ accountName }}</Var>!</p>
      </template>
      <template #default><p>Welcome to your account.</p></template>
    </Branch>
  </T>
</template>
```

For count-based language rules, use [`<Plural>`](/docs/vue/reference/components/plural).