# vue: <Plural>
URL: https://generaltranslation.com/en-GB/docs/vue/reference/components/plural.mdx
---
title: "<Plural>"
description: Render count-based content using the active locale's plural rules. API reference for the <Plural> component.

---

The `<Plural>` component selects a named slot based on a numeric count and the active locale&#39;s plural rules. Place it inside [`<T>`](/docs/vue/reference/components/t) when its alternatives should be translated.

## Overview [#overview]

Pass the count through `n` and define statically named slots for the forms required by your source:

```vue
<Plural :n="count">
  <template #one>One item</template>
  <template #other>Several items</template>
  <template #default>No matching form</template>
</Plural>
```

Wrap a dynamic count in [`<Num>`](/docs/vue/reference/components/num) when it appears in a branch&#39;s rendered text.

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

* **Numeric overrides.** When supplied, `zero` handles an absolute value of `0`; `singular`, then `one`, handles `1`; and `dual`, then `two`, handles `2`. These overrides run before locale rules.
* **Locale-driven selection.** Otherwise, `Intl.PluralRules` determines the locale&#39;s CLDR category. `singular` and `dual` can alias the locale&#39;s `one` and `two` categories, then `plural` and `other` provide general fallbacks in that order.
* **Fallback.** If none of the provided forms matches, the default slot renders. The component adds no HTML wrapper.
* **Static extraction.** Inside [`<T>`](/docs/vue/reference/components/t), the extractor records every supported named branch even though runtime rendering selects only one.

For a standalone `<Plural>`, the configured default locale ignores explicit `locales` and uses only that default. At another active locale, a standalone component tries explicit `locales`, the active locale, and the default locale in that order.

Inside [`<T>`](/docs/vue/reference/components/t), the rich translation controls plural selection. Source fallback content uses the default locale; translated content tries the active locale and then the default. An explicit `locales` prop is ignored in that case.

## Props and slots [#props]

| Name                       | Description                             | Type         | Optional | Default                 |
| -------------------------- | --------------------------------------- | ------------ | -------- | ----------------------- |
| [`n`](#n)                  | Count used to select a plural form.     | `number`     | No       | —                       |
| [`locales`](#locales)      | Preferred locales for plural selection. | `string[]`   | Yes      | Locale resolution order |
| [`default`](#default-slot) | Content rendered when no form matches.  | `VNodeChild` | Yes      | Empty                   |
| [`[form]`](#form-slots)    | Content for one supported plural form.  | `VNodeChild` | Yes      | —                       |

### `n`

**Type** `number` · **Required**

The count used to select a plural category. Display the count separately with [`<Num>`](/docs/vue/reference/components/num); `n` only controls the selection.

### `locales`

**Type** `string[]` · **Optional** · **Default** Locale resolution order

Preferred BCP 47 locale codes for standalone plural rules. They take precedence only when the active locale is not the configured default. Within [`<T>`](/docs/vue/reference/components/t), this prop is ignored.

### Default slot

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

Content rendered when no supplied named slot matches the selected form.

### Form slots

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

The supported names are:

* CLDR categories: `zero`, `one`, `two`, `few`, `many`, and `other`
* General aliases: `singular`, `dual`, and `plural`

Only add the categories required by the locales you support. Because numeric overrides are applied first, a provided `one` slot handles every absolute value of `1`, and a provided `two` slot handles every absolute value of `2`, even when the locale&#39;s CLDR category differs. Other values follow the locale category and fallback order.

Inside [`<T>`](/docs/vue/reference/components/t), form slots must be unconditional, statically named and unscoped. A named slot takes precedence over a static primitive attribute with the same name. Static string attributes are also supported for simple alternatives:

```vue
<Plural :n="count" one="One item" other="Several items" />
```

## Examples [#examples]

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

defineProps<{ count: number }>();
</script>

<template>
  <T>
    <Plural :n="count">
      <template #one>You have <Num :value="count" /> message.</template>
      <template #other>You have <Num :value="count" /> messages.</template>
      <template #default>No messages.</template>
    </Plural>
  </T>
</template>
```

For arbitrary value-based selection, use [`<Branch>`](/docs/vue/reference/components/branch).