Configuración de Storybook para Vue 3
npx storybook@latest init, .storybook/config, main.js, directorio de stories y ejecución
Configuración de Storybook para Vue 3 es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Vue Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué es Storybook?
Storybook es un taller para crear componentes de UI de forma aislada. Puede representar cada componente en todos sus estados fuera de la aplicación, documentarlo y probarlo visualmente, todo en un sandbox dedicado del navegador.
¿Por qué usarlo con Vue?
Desarrollar un botón o un modal dentro de una página profunda es lento. Storybook permite ver un componente por separado, cambiar sus props en tiempo real y detectar regresiones visuales antes de que lleguen a la aplicación.
Instalación con un solo comando
Ejecute el comando init en su proyecto existente de Vue 3. Detecta Vite, instala las dependencias y crea la configuración y las stories de ejemplo.
// terminal
// npx storybook@latest initQué crea init
El inicializador añade una carpeta de configuración .storybook/, archivos de ejemplo *.stories.* y scripts de npm. Detecta automáticamente la configuración de Vue 3 + Vite.
// .storybook/main.ts
// .storybook/preview.ts
// src/stories/*.stories.ts (examples)La configuración de main.ts
.storybook/main.ts es la configuración principal: indica dónde se encuentran las stories, qué addons se cargan y qué framework se utiliza. Para Vue 3 + Vite, el framework es @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 configEl glob de stories
El arreglo stories indica a Storybook dónde encontrar los archivos de stories mediante patrones glob. Ajústelo para que coincida con la estructura de sus carpetas.
stories: [
"../src/**/*.stories.@(js|jsx|ts|tsx)",
]El framework vue3-vite
El paquete del framework integra Storybook con su configuración existente de Vite, de modo que los alias, los plugins y la gestión de CSS coincidan con la compilación real de su aplicación.
framework: {
name: "@storybook/vue3-vite",
options: {},
}El archivo preview.ts
.storybook/preview.ts configura los ajustes globales que se aplican a todas las stories: decoradores globales, parámetros e importación de 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 previewDecoradores y plugins globales
Si los componentes necesitan un router o Pinia, regístrelos una sola vez en preview.ts mediante setup para que todas las stories tengan acceso a ellos, sin código repetitivo en cada story.
// .storybook/preview.ts
import { setup } from "@storybook/vue3"
import { createPinia } from "pinia"
setup((app) => {
app.use(createPinia())
})Ejecución del servidor de desarrollo
Inicie Storybook localmente con el comando de desarrollo. El puerto convencional es 6006.
// terminal
// npm run storybook
// or directly:
// storybook dev -p 6006Creación de un Storybook estático
Para desplegarlo, cree un sitio estático que pueda alojar en cualquier lugar. En los entornos de CI, lo habitual es publicarlo para revisar el diseño.
// terminal
// storybook build
// outputs to storybook-static/Comprobación rápida
Compruebe su comprensión de la configuración de Storybook para Vue 3.
Resumen
Ha configurado Storybook para Vue 3:
- Storybook crea y documenta componentes de forma aislada.
npx storybook@latest initcrea la configuración y los ejemplos..storybook/main.tsdefine el glob destories, los addons y el framework@storybook/vue3-vite..storybook/preview.tsgestiona la configuración global (CSS, decoradores y plugins como Pinia).- Ejecute Storybook con
storybook dev -p 6006y cree un sitio estático constorybook build.
Preguntas frecuentes
¿La lección «Configuración de Storybook para Vue 3» es gratis?
Sí — el texto completo de «Configuración de Storybook para Vue 3» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Vue Academy, actualiza a CoddyKit PRO. El curso de Vue Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Configuración de Storybook para Vue 3»?
npx storybook@latest init, .storybook/config, main.js, directorio de stories y ejecución Practicas Vue Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Vue Academy?
No se requiere experiencia previa. Vue Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Configuración de Storybook para Vue 3»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Vue Academy?
Sí. Cada lección de Vue Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Configuración de Storybook para Vue 3
- Escritura de stories de componentes
- Controles, acciones y args
- Addons de Storybook y pruebas de accesibilidad