---
title: Vue
description: "Créez de la documentation qui s'adapte au choix de framework ou de langage du lecteur. Des sections entières changent selon la sélection de l'utilisateur."
---

Les Vues vous permettent de créer de la documentation qui s'adapte au choix de framework ou de langage du lecteur. Contrairement aux Tabs (qui affichent plusieurs options côte à côte), les Vues masquent complètement le contenu non sélectionné — créant une expérience plus claire lorsque des sections entières diffèrent entre les frameworks.

Utilisez les Vues quand :
- **Des sections entières de la page** diffèrent par framework (pas seulement des extraits de code)
- **Des tutoriels** ont des étapes différentes selon les technologies
- **Des guides de démarrage** varient considérablement selon la plateforme

<Tip>
Pour des exemples de code qui diffèrent par langage, utilisez [CodeGroup](/fr/components/code-group). Pour des procédures avec des différences mineures, utilisez [Tabs](/fr/components/tabs). Utilisez les Vues quand **des sections entières** du contenu sont spécifiques à un framework.
</Tip>

## Utilisation de base

Créez des vues pour différents langages :

<View title="JavaScript" icon="js">
  Ce contenu n'est visible que lorsque JavaScript est sélectionné.

  ```javascript
  console.log("Hello from JavaScript!");
  ```
</View>

<View title="Python" icon="python">
  Ce contenu n'est visible que lorsque Python est sélectionné.

  ```python
  print("Hello from Python!")
  ```
</View>

````mdx
<View title="JavaScript" icon="js">
  This content is only visible when JavaScript is selected.

  ```javascript
  console.log("Hello from JavaScript!");
  ```
</View>

<View title="Python" icon="python">
  This content is only visible when Python is selected.

  ```python
  print("Hello from Python!")
  ```
</View>
````

## Fonctionnement

Lorsque vous ajoutez des composants Vue à une page :

1. Un sélecteur déroulant apparaît en haut du contenu
2. Les utilisateurs peuvent basculer entre les vues à l'aide du menu déroulant
3. Seul le contenu de la vue sélectionnée est visible

## Vue vs Tabs vs CodeGroup

| Composant | Idéal pour | Portée |
|-----------|------------|--------|
| **Vue** | Des sections entières qui diffèrent par framework | Changement de contenu à l'échelle de la page |
| **Tabs** | Comparaisons rapides, gestionnaires de paquets | Changement de contenu en ligne |
| **CodeGroup** | La même opération dans plusieurs langages | Blocs de code uniquement |

**Exemples de scénarios :**
- « Installer avec npm ou yarn » → **Tabs** (petite différence)
- « JavaScript fetch vs Python requests » → **CodeGroup** (comparaison de code)
- « Tutoriel React vs tutoriel Vue » → **Vue** (section entière différente)

## Props

<ParamField name="title" type="string" required>
  Le titre affiché dans le sélecteur déroulant. Doit être unique sur la page.
</ParamField>

<ParamField name="icon" type="string">
  Une icône Font Awesome, une icône Lucide, une URL vers une icône, ou un chemin relatif vers une icône.
</ParamField>

<ParamField name="iconType" type="string" default="solid">
  Pour les icônes Font Awesome uniquement. Options : `regular`, `solid`, `light`, `thin`, `sharp-solid`, `duotone`, `brands`.
</ParamField>

## Et ensuite ?

<Columns cols={2}>
  <Card title="Vue d'ensemble des composants" icon="puzzle-piece" href="/fr/components/overview">
    Parcourir tous les composants disponibles
  </Card>
  <Card title="Bases MDX" icon="file-code" href="/fr/content/mdx-basics">
    Apprendre à utiliser les composants en MDX
  </Card>
</Columns>