# vue: Formatear números y fechas
URL: https://generaltranslation.com/es/docs/vue/guides/formatting-variables.mdx
---

title: Formatear números y fechas
description: Cómo preservar valores dinámicos y formatear números, monedas y fechas para cada configuración regional de Vue.
related:
  links:
    - /docs/vue/guides/translating-content
    - /docs/vue/guides/handling-plurals-and-branches
    - /docs/vue/guides/translating-strings
    - /docs/vue/guides/managing-locales

---

Los valores dinámicos deben mantenerse separados del texto estático que los traductores pueden reordenar. Usa [`<Var>`](/docs/vue/reference/components/var) para los valores que deben mostrarse sin cambios y los componentes de formato para los valores que deben ajustarse a las convenciones de la configuración regional.

## Elige el componente adecuado [#choose]

* [`<Var>`](/docs/vue/reference/components/var) conserva un valor de tiempo de ejecución sin traducirlo ni formatearlo.
* [`<Num>`](/docs/vue/reference/components/num) formatea números, porcentajes y unidades.
* [`<Currency>`](/docs/vue/reference/components/currency) formatea un importe con un código de divisa ISO 4217; no convierte el importe.
* [`<DateTime>`](/docs/vue/reference/components/datetime) formatea una fecha del calendario, una hora o ambas.

Los tres componentes de formato requieren la prop `value`. A diferencia de sus equivalentes en React, no obtienen el valor del contenido de la ranura.

## Conserva un valor con `<Var>` [#var]

Coloca el valor de tiempo de ejecución en la ranura predeterminada de [`<Var>`](/docs/vue/reference/components/var):

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

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

<template>
  <T>Welcome back, <Var>{{ accountName }}</Var>!</T>
</template>
```

[`<Var>`](/docs/vue/reference/components/var) está diseñado para usarse únicamente como elemento hijo. No acepta las props `name` ni `value` propias de React. El valor se excluye de la traducción y se vuelve a insertar donde la frase traducida haga referencia a él.

Úsalo para nombres de usuario, identificadores, información privada y otros valores que deban aparecer exactamente como se proporcionan.

## Formatear números y monedas [#numbers]

Pasa el número en tiempo de ejecución mediante `:value`. Usa `options` para cualquier opción de [`Intl.NumberFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/NumberFormat):

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

const completion = 0.72;
const total = 1299.5;
</script>

<template>
  <T>
    Tu perfil está completo en un
    <Num :value="completion" :options="{ style: 'percent' }" />
    .
  </T>

  <T>
    Tu total es <Currency :value="total" currency="USD" />.
  </T>
</template>
```

[`<Currency>`](/docs/vue/reference/components/currency) usa `USD` de forma predeterminada si se omite `currency`. Especifica el código explícitamente cuando el importe corresponda a otra moneda.

El formateo solo cambia la presentación. Un valor de `1299.5` sigue representando el mismo importe aunque cambien los separadores y la posición de la moneda.

## Formatear fechas y horas [#dates]

[`<DateTime>`](/docs/vue/reference/components/datetime) acepta un `Date`, un número de época, una cadena de fecha o `null`. Pasa opciones a [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) para elegir los campos que se muestran y la zona horaria:

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

const publishedAt = new Date('2026-08-12T17:30:00Z');
</script>

<template>
  <T>
    Published
    <DateTime
      :value="publishedAt"
      :options="{
        dateStyle: 'medium',
        timeStyle: 'short',
        timeZone: 'UTC',
      }"
    />.
  </T>
</template>
```

Fija la zona horaria cuando el mismo instante deba renderizarse de forma coherente en el servidor y el cliente. De lo contrario, la zona horaria local de cada entorno puede generar resultados distintos durante la hidratación.

## Controlar las configuraciones regionales de formato [#locales]

La configuración regional de traducción activa normalmente controla el formato. Un formateador independiente puede recibir una lista ordenada de preferencias de `locales`:

```vue
<Num :value="total" :locales="['fr-CA', 'fr']" />
```

Cuando la configuración regional activa no coincide con la predeterminada, un formateador independiente prueba primero las `locales` explícitas, luego la configuración regional activa y, por último, la predeterminada. En la configuración regional predeterminada, el formato de origen usa ese valor e ignora el reemplazo.

Dentro de [`<T>`](/docs/vue/reference/components/t), el flujo de traducción enriquecida determina la configuración regional: el contenido alternativo de origen usa la configuración regional predeterminada, mientras que el contenido traducido usa primero la activa y luego la predeterminada. Da preferencia a la configuración regional activa, salvo que el valor requiera específicamente una configuración regional externa.
## Next steps

- /docs/vue/guides/translating-content
- /docs/vue/guides/handling-plurals-and-branches
- /docs/vue/guides/translating-strings
- /docs/vue/guides/managing-locales