# vue: Gestión de plurales y ramas
URL: https://generaltranslation.com/es/docs/vue/guides/handling-plurals-and-branches.mdx
---

title: Gestión de plurales y ramas
description: Cómo traducir contenido condicional de Vue y basado en conteos con <Plural> y <Branch>.
related:
  links:
    - /docs/vue/guides/formatting-variables
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales

---

Las distintas configuraciones regionales pueden requerir formas plurales y redacciones diferentes según la condición. Representa cada alternativa finita en slots con nombre para que la CLI pueda extraer cada frase completa.

Usa [`<Plural>`](/docs/vue/reference/components/plural) cuando un número determine la redacción. Usa [`<Branch>`](/docs/vue/reference/components/branch) para estados, planes, valores booleanos y otros valores con nombre.

## Elige plurales o ramas [#choose]

* Usa [`<Plural>`](/docs/vue/reference/components/plural) cuando el conteo determine la frase.
* Usa [`<Branch>`](/docs/vue/reference/components/branch) cuando otro valor determine la frase.
* Coloca cualquiera de los componentes dentro de [`<T>`](/docs/vue/reference/components/t) para que cada slot con nombre pertenezca a la entrada traducida.
* Usa el slot predeterminado como contenido alternativo para una categoría o rama no reconocida.
* Envuelve los valores de tiempo de ejecución de cada frase con [`<Num>`](/docs/vue/reference/components/num), [`<Var>`](/docs/vue/reference/components/var) u otro componente de formato.

## Pluraliza con `<Plural>` [#plural]

Pasa el conteo mediante `:n` y proporciona slots con nombre para las categorías que utiliza la configuración regional de origen:

```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>
        You have new messages.
      </template>
    </Plural>
  </T>
</template>
```

[`<Plural>`](/docs/vue/reference/components/plural) combina anulaciones numéricas para los valores absolutos `0`, `1` y `2` con las [reglas de plural de Unicode CLDR](https://cldr.unicode.org/index/cldr-spec/plural-rules) de la configuración regional activa. En inglés se suelen usar `one` y `other`; las traducciones de destino pueden incluir categorías adicionales como `zero`, `two`, `few` y `many`.

No modele la gramática de los plurales con `count === 1` ni añadiendo un sufijo. Estos atajos codifican las reglas del idioma de origen, en lugar de las de la configuración regional activa.

## Ramificar en función de un valor con nombre [#branch]

Pasa una cadena, un número o un valor booleano mediante `:branch` y luego usa una ranura con nombre estático para cada valor esperado:

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

defineProps<{ plan: 'free' | 'pro' | 'enterprise' }>();
</script>

<template>
  <T>
    <Branch :branch="plan">
      <template #free>Mejora tu plan para desbloquear más.</template>
      <template #pro>¡Gracias por pasarte a Pro!</template>
      <template #enterprise>Contacta con tu administrador de cuenta.</template>
      <template #default>Te damos la bienvenida.</template>
    </Branch>
  </T>
</template>
```

Cada slot se incluye en el componente [`<T>`](/docs/vue/reference/components/t) contenedor, mientras que solo se renderiza la rama activa. Si ningún slot con nombre coincide, [`<Branch>`](/docs/vue/reference/components/branch) renderiza el slot predeterminado.

## Sustituye los condicionales inline [#conditionals]

Un `v-if` inline modifica la estructura traducida en tiempo de ejecución. En su lugar, mueve las alternativas finitas a [`<Branch>`](/docs/vue/reference/components/branch):

```vue
<!-- ❌ Estructura en runtime oculta a la traducción -->
<T>
  <span v-if="isActive">Active</span>
  <span v-else>Inactive</span>
</T>

<!-- ✅ Todas las frases son visibles durante la extracción -->
<T>
  <Branch :branch="isActive ? 'active' : 'inactive'">
    <template #active>Active</template>
    <template #inactive>Inactive</template>
  </Branch>
</T>
```

Los nombres de los slots deben ser estáticos e incondicionales. Si el conjunto de alternativas no es finito en tiempo de compilación, mantén ese contenido de tiempo de ejecución fuera de [`<T>`](/docs/vue/reference/components/t) o consérvalo como un [`<Var>`](/docs/vue/reference/components/var) opaco.
## Next steps

- /docs/vue/guides/formatting-variables
- /docs/vue/guides/translating-content
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales