# vue: Formatage des nombres et des dates
URL: https://generaltranslation.com/fr/docs/vue/guides/formatting-variables.mdx
---
title: Formatage des nombres et des dates
description: Comment préserver les valeurs dynamiques et formater les nombres, les devises et les dates pour chaque paramètre régional dans 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

---

Les valeurs dynamiques doivent rester distinctes du texte statique que les traducteurs peuvent réorganiser. Utilisez [`<Var>`](/docs/vue/reference/components/var) pour les valeurs qui doivent être affichées sans modification, et les composants de formatage pour celles qui doivent respecter les conventions du paramètre régional.

## Choisissez le composant approprié [#choose]

* [`<Var>`](/docs/vue/reference/components/var) préserve une valeur d’exécution sans la traduire ni la formater.
* [`<Num>`](/docs/vue/reference/components/num) formate les nombres, les pourcentages et les unités.
* [`<Currency>`](/docs/vue/reference/components/currency) formate un montant à l’aide d’un code devise ; il ne convertit pas le montant.
* [`<DateTime>`](/docs/vue/reference/components/datetime) formate une date, une heure, ou les deux.

Les trois composants de formatage nécessitent une prop `value`. Contrairement à leurs équivalents React, ils ne lisent pas la valeur à partir du contenu du slot.

## Préserver une valeur avec `<Var>` [#var]

Placez la valeur d’exécution dans le slot par défaut 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 conçu pour ne contenir que du contenu enfant. Il n’accepte pas les props `name` ou `value` de type React. La valeur est exclue de la traduction et réinsérée partout où la phrase traduite y fait référence.

Utilisez-le pour les noms d’utilisateur, les identifiants, les informations privées et toute autre valeur qui doit apparaître exactement telle qu’elle a été fournie.

## Formater les nombres et les devises [#numbers]

Transmettez le nombre au Runtime via `:value`. Utilisez `options` pour toute option 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>
    Your profile is
    <Num :value="completion" :options="{ style: 'percent' }" />
    complete.
  </T>

  <T>
    Your total is <Currency :value="total" currency="USD" />.
  </T>
</template>
```

[`<Currency>`](/docs/vue/reference/components/currency) utilise `USD` par défaut lorsque `currency` n’est pas renseigné. Définissez explicitement le code lorsque le montant est exprimé dans une autre devise.

Le formatage modifie uniquement la présentation. Une valeur de `1299.5` représente le même montant, même si les séparateurs et le positionnement de la devise changent.

## Formater les dates et les heures [#dates]

[`<DateTime>`](/docs/vue/reference/components/datetime) accepte une `Date`, un nombre d’époque, une chaîne de caractères représentant une date ou `null`. Transmettez des options à [`Intl.DateTimeFormat`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Intl/DateTimeFormat) pour choisir les champs à afficher et le fuseau horaire :

```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>
```

Fixez le fuseau horaire lorsque le même instant doit s’afficher de manière cohérente sur le serveur et le client. Sinon, le fuseau horaire local de chaque environnement peut produire un résultat différent lors de l’hydratation.

## Contrôler les paramètres régionaux de formatage [#locales]

Le paramètre régional de traduction actif contrôle généralement le formatage. Un formateur autonome peut recevoir une liste ordonnée de préférences `locales` :

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

Lorsque le paramètre régional actif n’est pas le paramètre régional par défaut, un formateur autonome utilise d’abord les `locales` explicitement définies, puis le paramètre régional actif, puis le paramètre régional par défaut. Pour ce dernier, le formatage source l’utilise et ignore le remplacement.

Dans [`<T>`](/docs/vue/reference/components/t), le pipeline de traduction enrichie gère la sélection du paramètre régional : le contenu source de secours utilise le paramètre régional par défaut, tandis que le contenu traduit utilise le paramètre régional actif, puis celui par défaut. Privilégiez le paramètre régional actif, sauf si la valeur doit respecter un paramètre régional externe spécifique.
## Next steps

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