0Pricing
Vue Academy · Leçon

Configurer Storybook pour Vue 3

npx storybook@latest init, .storybook/config, main.js, répertoire stories et exécution

Configurer Storybook pour Vue 3 est une leçon Vue Academy gratuite sur CoddyKit. Ceci est la leçon 1 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Vue Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Vue Academy comprend 4 leçons au total.

Qu’est-ce que Storybook ?

Storybook est un atelier permettant de créer des composants d’interface utilisateur de manière isolée. Vous affichez chaque composant dans tous ses états, en dehors de votre application, vous le documentez et vous le vérifiez visuellement, le tout dans un bac à sable dédié du navigateur.

Pourquoi l’utiliser avec Vue ?

Développer un bouton ou une fenêtre modale au sein d’une page complexe est lent. Storybook vous permet d’afficher un composant seul, de modifier ses propriétés en direct et de détecter les régressions visuelles avant qu’elles n’atteignent l’application.

Installation en une seule commande

Exécutez la commande d’initialisation dans votre projet Vue 3 existant. Elle détecte Vite, installe les dépendances et crée la configuration ainsi que des récits d’exemple.

// terminal
// npx storybook@latest init

Ce que crée init

L’initialiseur ajoute un dossier de configuration .storybook/, des fichiers d’exemple *.stories.* et des scripts npm. Il détecte automatiquement la configuration Vue 3 + Vite.

// .storybook/main.ts
// .storybook/preview.ts
// src/stories/*.stories.ts (examples)

La configuration main.ts

.storybook/main.ts est la configuration centrale : elle indique où se trouvent les récits, quelles extensions sont chargées et quel cadre utiliser. Pour Vue 3 + Vite, le cadre est @storybook/vue3-vite.

// .storybook/main.ts
import type { StorybookConfig } from "@storybook/vue3-vite"

const config: StorybookConfig = {
  stories: ["../src/**/*.stories.@(js|ts)"],
  addons: ["@storybook/addon-essentials"],
  framework: { name: "@storybook/vue3-vite", options: {} },
}
export default config

Le motif de fichiers des récits

Le tableau stories indique à Storybook où trouver les fichiers de récits à l’aide de motifs de fichiers. Adaptez-le à l’organisation de vos dossiers.

stories: [
  "../src/**/*.stories.@(js|jsx|ts|tsx)",
]

Le cadre vue3-vite

Le paquet du cadre intègre Storybook à votre configuration Vite existante, afin que les alias, les extensions et la gestion de CSS correspondent à la véritable génération de votre application.

framework: {
  name: "@storybook/vue3-vite",
  options: {},
}

Le fichier preview.ts

.storybook/preview.ts configure la mise en place globale qui s’applique à chaque récit : décorateurs globaux, paramètres et importation du CSS global.

// .storybook/preview.ts
import type { Preview } from "@storybook/vue3"
import "../src/assets/main.css"

const preview: Preview = {
  parameters: {
    controls: { matchers: { color: /color/i } },
  },
}
export default preview

Décorateurs et extensions globaux

Si les composants ont besoin d’un routeur ou de Pinia, enregistrez-les une seule fois dans preview.ts via setup afin que chaque récit y ait accès, sans code répétitif propre à chaque récit.

// .storybook/preview.ts
import { setup } from "@storybook/vue3"
import { createPinia } from "pinia"

setup((app) => {
  app.use(createPinia())
})

Exécuter le serveur de développement

Démarrez Storybook localement avec la commande de développement. Le port conventionnel est 6006.

// terminal
// npm run storybook
// or directly:
// storybook dev -p 6006

Créer un Storybook statique

Pour le déploiement, générez un site statique que vous pouvez héberger n’importe où. L’intégration continue le publie généralement pour les revues de conception.

// terminal
// storybook build
// outputs to storybook-static/

Vérification rapide

Vérifiez votre compréhension de la configuration de Storybook pour Vue 3.

Récapitulatif

Vous avez configuré Storybook pour Vue 3 :

  • Storybook crée et documente les composants de manière isolée.
  • npx storybook@latest init génère la configuration et des exemples.
  • .storybook/main.ts définit le motif des stories, les extensions et le cadre @storybook/vue3-vite.
  • .storybook/preview.ts gère la mise en place globale (CSS, décorateurs et extensions comme Pinia).
  • Exécutez Storybook avec storybook dev -p 6006 et générez un site statique avec storybook build.

Questions Fréquemment Posées

La leçon « Configurer Storybook pour Vue 3 » est-elle gratuite ?

Oui — le texte complet de « Configurer Storybook pour Vue 3 » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Vue Academy, passe à CoddyKit PRO. Le cours Vue Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Configurer Storybook pour Vue 3 » ?

npx storybook@latest init, .storybook/config, main.js, répertoire stories et exécution Tu pratiques Vue Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Vue Academy ?

Aucune expérience préalable n'est requise. Vue Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 1 sur 4.

Combien de temps prend la leçon « Configurer Storybook pour Vue 3 » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Vue Academy ?

Oui. Chaque leçon Vue Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

  1. Configurer Storybook pour Vue 3
  2. Écrire des stories de composants
  3. Contrôles, actions et args
  4. Modules complémentaires Storybook et tests d’accessibilité
← Retour à Vue Academy