Escrita de histórias de componentes
Formato CSF3, exportação padrão (title, component), exportações nomeadas como histórias e args.
Escrita de histórias de componentes é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 2 de 4. Você pode ler a aula completa abaixo gratuitamente — depois pratica ao vivo no navegador com um editor de código integrado e um tutor de IA 24/7. Faz parte do caminho de aprendizado de Vue Academy, e seu progresso é sincronizado entre a web e o app CoddyKit. O curso de Vue Academy inclui 4 aulas no total.
As histórias descrevem estados dos componentes
Uma história captura um estado de um componente — um conjunto específico de propriedades e conteúdo. Um botão pode ter histórias Primary, Secondary e Disabled. O Storybook exibe cada uma como um exemplo separado e navegável.
CSF3: o formato moderno
O Storybook usa o Component Story Format 3 (CSF3). Um arquivo tem uma exportação padrão que descreve o componente e exportações nomeadas para cada história. São objetos simples de JavaScript/TypeScript — com o mínimo de código repetitivo.
A exportação padrão (meta)
A exportação padrão é o objeto meta. No mínimo, ele tem um title (o caminho da barra lateral) e o component que está sendo documentado.
import Button from "./Button.vue"
export default {
title: "Components/Button",
component: Button,
}title organiza a barra lateral
title usa barras para criar uma hierarquia de pastas na barra lateral do Storybook. "Forms/Inputs/TextField" aninha três níveis.
export default {
title: "Forms/Inputs/TextField",
component: TextField,
}As exportações nomeadas são histórias
Cada exportação nomeada é uma variante de história. O nome da exportação se torna o rótulo da história na barra lateral.
export const Primary = {}
export const Secondary = {}
export const Disabled = {}O objeto args
O objeto args de uma história fornece valores para as propriedades. O Storybook os passa ao componente, e o painel Controles permite ajustá-los em tempo real.
export const Primary = {
args: {
label: "Click me",
variant: "primary",
},
}Várias variantes por meio de args
Reutilize o mesmo componente entre as histórias alterando apenas args. Cada exportação exibe o componente com propriedades diferentes.
export const Primary = { args: { variant: "primary", label: "Save" } }
export const Danger = { args: { variant: "danger", label: "Delete" } }Args padrão em meta
Coloque args compartilhados no objeto meta; as histórias individuais substituem apenas o que for diferente. Isso mantém as histórias DRY.
export default {
component: Button,
args: { label: "Button" }, // default for all stories
}
export const Disabled = { args: { disabled: true } }Histórias com slots por meio de render
Para conteúdo em slots, forneça uma função render que retorne um modelo usando o componente. Isso abrange casos que apenas args não conseguem expressar.
export const WithIcon = {
render: (args) => ({
components: { Button },
setup() { return { args } },
template: '<Button v-bind="args">⭐ Star</Button>',
}),
}Documentação gerada automaticamente com tags
Adicione tags: ["autodocs"] ao meta para fazer o Storybook gerar automaticamente uma página de documentação para o componente, a partir de suas propriedades e histórias.
export default {
title: "Components/Button",
component: Button,
tags: ["autodocs"],
}O que a autodocumentação produz
A página de autodocumentação lista as propriedades do componente (nome, tipo e padrão), exibe cada história como um exemplo interativo e renderiza quaisquer comentários descritivos — uma especificação viva sem arquivos adicionais.
Verificação rápida
Verifique sua compreensão sobre como escrever histórias.
Recapitulação
Você aprendeu a escrever histórias de componentes:
- Uma história captura um estado de um componente; o CSF3 usa exportações de objetos.
- A exportação padrão é o meta, com
title(caminho da barra lateral) ecomponent. - Cada exportação nomeada é uma variante de história;
argsfornece os valores de suas propriedades. - Os args compartilhados ficam no meta; as histórias substituem o restante. Use
renderpara slots. tags: ["autodocs"]gera automaticamente uma página de documentação.
Aprenda HTML com um tutor de IA — grátis
Escreva e execute código real no seu navegador, obtenha ajuda instantânea de um tutor de IA 24/7 e continue de onde parou na web ou no app.
- Cursos
- 42
- Aulas
- 156
Perguntas Frequentes
A aula “Escrita de histórias de componentes” é grátis?
Sim — o texto completo de “Escrita de histórias de componentes” é grátis para ler aqui na web. Para praticá-la interativamente (um editor de código integrado e um tutor de IA 24/7) e desbloquear o restante do curso de Vue Academy, atualize para CoddyKit PRO. O curso de Vue Academy inclui 4 aulas no total.
O que vou aprender em “Escrita de histórias de componentes”?
Formato CSF3, exportação padrão (title, component), exportações nomeadas como histórias e args. Você pratica Vue Academy com código prático que executa diretamente no navegador, e um tutor de IA 24/7 responde suas dúvidas enquanto trabalha na aula.
Preciso ter experiência prévia para começar Vue Academy?
Nenhuma experiência prévia é necessária. Vue Academy no CoddyKit é estruturado para alunos iniciantes até avançados, então você pode começar aqui ou desde o início e aprender no seu ritmo. Esta é a aula 2 de 4.
Quanto tempo leva a aula “Escrita de histórias de componentes”?
A maioria das aulas CoddyKit leva cerca de 5–10 minutos. Cada uma é compacta e interativa, então você faz progresso constante e retoma exatamente de onde parou entre web e app.
Posso escrever e executar código nesta aula de Vue Academy?
Sim. Cada aula de Vue Academy inclui um editor de código integrado, então você escreve e executa código real direto no navegador e recebe feedback de IA instantaneamente — nenhuma configuração local necessária.
Todas as aulas deste curso
- Configuração do Storybook para Vue 3
- Escrita de histórias de componentes
- Controles, ações e args
- Complementos do Storybook e testes de acessibilidade