# Vue: `<Branch>`
URL: https://generaltranslation.com/en-US/docs/vue/reference/components/branch.mdx
Docs index: https://generaltranslation.com/llms.txt
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. Put it inside [`<T>`](/docs/vue/reference/components/t) when its alternatives should 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 wins 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).

## Sitemap

See the full [sitemap](https://generaltranslation.com/sitemap.md) for all pages.