Trouver et prévisualiser

Cette page explique comment trouver le bon composant dans le marché des composants et vérifier qu'il fonctionne réellement avant de le télécharger.

Accéder au marché des composants

Après avoir démarré le service local, cliquez sur « Marché des composants » dans le menu de gauche. Chaque carte de la liste correspond à un composant publié.

Quatre filtres sont proposés en haut :

Filtre	Signification	Quand l'utiliser
Recommandé	Tri recommandé combinant usage et notes	Sans objectif précis, pour explorer
Récent	Par date de publication décroissante	Pour voir les composants récemment produits par l'équipe
Populaire	Trié par nombre de téléchargements	Pour trouver des composants validés par de nombreux projets
Tout	Sans filtrage par correspondance des dépendances	Vous savez que le composant existe, mais il n'apparaît pas dans les trois premières listes

Pourquoi certains composants n'apparaissent-ils que dans « Tout » ?

Les trois premières listes excluent les composants dont les dépendances ne correspondent pas à l'environnement local. Si un composant n'apparaît pas, passez d'abord à « Tout » pour confirmer son existence, puis traitez le problème de version via Correspondance des dépendances.

Informations sur la carte

• Nom et auteur : le nom du composant est unique dans un même espace ; l'auteur est la personne qui publie.
• Description : la note saisie lors de la publication, pour juger rapidement de l'usage.
• Étiquettes de dépendances : les paquets tiers réellement référencés dans le code source du composant.
• Statistiques : téléchargements, favoris et autres indicateurs d'usage.

Ouvrir la page d'aperçu

Cliquez sur « Aperçu » sur la carte : la page de détail s'ouvre dans un nouvel onglet. Elle comprend cinq zones :

1. Zone d'aperçu : rendu réel du composant, avec bascule entre petite fenêtre et plein écran.
2. Zone de documentation : rendu du README.md du composant, avec propriétés, événements et exemples d'utilisation.
3. Sélection de version : bascule entre les versions historiques pour comparer les comportements avant le téléchargement.
4. Informations sur les dépendances : dépendances déclarées, état de correspondance locale et éléments manquants.
5. Contrôle de l'apparence : changement de la couleur de fond pour vérifier le composant sur fond clair et sur fond sombre.

Ce qu'il faut vérifier pendant l'aperçu

• Le composant se rend correctement avec votre version de framework actuelle (Vue 2 / Vue 3 / React).
• Les interactions se comportent comme prévu, et pas seulement une jolie capture statique.
• L'état des dépendances n'affiche aucune alerte rouge ; le jaune signale un écart de version, à surveiller.
• Le tableau des propriétés du README correspond au comportement réel.

Que faire si le composant ne s'affiche pas

Vérifiez dans l'ordre :

1. Passez le filtre à « Tout » pour confirmer que le composant existe bien.
2. Ouvrez le détail du composant et consultez l'état des dépendances ainsi que les éléments manquants.
3. Installez les dépendances manquantes dans le projet local, puis rafraîchissez la page.
4. Si l'écart de version n'affecte pas le fonctionnement, assouplissez la règle dans « Paramètres → Règles d'aperçu ».

Pour les règles complètes et des exemples, voir Correspondance des dépendances.

Prochaines étapes

• Télécharger une fois l'utilisation confirmée : Télécharger et utiliser
• Modifier le composant puis le republier : Mise à jour et versions