Escritura de stories de componentes
Formato CSF3, exportación predeterminada (title, component), exportaciones con nombre como stories y args
Escritura de stories de componentes es una lección gratuita de Vue Academy en CoddyKit. Esta es la lección 2 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.
Las stories describen estados del componente
Una story representa un estado de un componente: un conjunto específico de props y contenido. Un botón podría tener stories Primary, Secondary y Disabled. Storybook representa cada una como un ejemplo independiente que se puede explorar.
CSF3: el formato moderno
Storybook utiliza Component Story Format 3 (CSF3). Un archivo tiene una exportación predeterminada que describe el componente y exportaciones con nombre para cada story. Son objetos normales de JavaScript/TypeScript, con un mínimo de código repetitivo.
La exportación predeterminada (meta)
La exportación predeterminada es el objeto meta. Como mínimo, contiene un title (la ruta de la barra lateral) y el component que se documenta.
import Button from "./Button.vue"
export default {
title: "Components/Button",
component: Button,
}title organiza la barra lateral
title utiliza barras diagonales para crear una jerarquía de carpetas en la barra lateral de Storybook. "Forms/Inputs/TextField" anida tres niveles.
export default {
title: "Forms/Inputs/TextField",
component: TextField,
}Las exportaciones con nombre son stories
Cada exportación con nombre es una variante de story. El nombre de la exportación se convierte en la etiqueta de la story en la barra lateral.
export const Primary = {}
export const Secondary = {}
export const Disabled = {}El objeto args
El objeto args de una story proporciona los valores de sus props. Storybook se los pasa al componente y el panel Controls permite modificarlos en tiempo real.
export const Primary = {
args: {
label: "Click me",
variant: "primary",
},
}Varias variantes mediante args
Reutilice el mismo componente en varias stories cambiando únicamente args. Cada exportación representa el componente con props diferentes.
export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }args predeterminados en meta
Coloque los args compartidos en el objeto meta; las stories individuales solo sobrescriben lo que difiere. Así mantiene las stories DRY.
export default {
component: Button,
args: { label: "Button" }, // default for all stories
}
export const Disabled = { args: { disabled: true } }Stories con slots mediante render
Para contenido en slots, proporcione una función render que devuelva un template en el que se utilice el componente. Esto cubre los casos que no se pueden expresar únicamente con args.
export const WithIcon = {
render: (args) => ({
components: { Button },
setup() { return { args } },
template: '<Button v-bind="args">⭐ Star</Button>',
}),
}Documentación autogenerada con tags
Añada tags: ["autodocs"] al meta para que Storybook genere automáticamente una página de documentación del componente a partir de sus props y stories.
export default {
title: "Components/Button",
component: Button,
tags: ["autodocs"],
}Qué produce autodocs
La página de autodocs enumera las props del componente (nombre, tipo y valor predeterminado), muestra cada story como un ejemplo interactivo y representa los comentarios descriptivos; es una especificación viva sin archivos adicionales.
Comprobación rápida
Compruebe su comprensión de la escritura de stories.
Resumen
Ha aprendido a escribir stories de componentes:
- Una story representa un estado de un componente; CSF3 utiliza exportaciones de objetos.
- La exportación predeterminada es meta, con
title(la ruta de la barra lateral) ycomponent. - Cada exportación con nombre es una variante de story;
argsproporciona sus valores de props. - Los args compartidos se colocan en meta y las stories sobrescriben el resto. Utilice
renderpara los slots. tags: ["autodocs"]genera automáticamente una página de documentación.
Preguntas frecuentes
¿La lección «Escritura de stories de componentes» es gratis?
Sí — el texto completo de «Escritura de stories de componentes» 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 «Escritura de stories de componentes»?
Formato CSF3, exportación predeterminada (title, component), exportaciones con nombre como stories y args 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 2 de 4.
¿Cuánto tiempo toma la lección «Escritura de stories de componentes»?
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