0Pricing
Vue Academy · Aula

Configuração do Storybook para Vue 3

npx storybook@latest init, .storybook/config, main.js, diretório de histórias e execução.

Configuração do Storybook para Vue 3 é uma aula grátis de Vue Academy no CoddyKit. Esta é a aula 1 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.

O que é o Storybook?

Storybook é uma oficina para criar componentes de interface isoladamente. Você exibe cada componente em todos os seus estados fora do aplicativo, documenta-o e testa-o visualmente — tudo em um ambiente isolado dedicado no navegador.

Por que usá-lo com Vue?

Desenvolver um botão ou uma janela modal dentro de uma página profunda é lento. O Storybook permite visualizar um componente por conta própria, alterar suas propriedades em tempo real e detectar regressões visuais antes que elas cheguem ao aplicativo.

Instalação com um único comando

Execute o comando de inicialização em seu projeto Vue 3 existente. Ele detecta o Vite, instala as dependências e cria a estrutura inicial da configuração e das histórias de exemplo.

// terminal
// npx storybook@latest init

O que a inicialização cria

O inicializador adiciona uma pasta de configuração .storybook/, arquivos de exemplo *.stories.* e scripts do npm. Ele detecta automaticamente a configuração Vue 3 + Vite.

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

A configuração de main.ts

.storybook/main.ts é a configuração principal: define onde as histórias ficam, quais complementos são carregados e qual estrutura usar. Para Vue 3 + Vite, a estrutura é @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

O padrão de arquivos das histórias

A matriz stories informa ao Storybook onde encontrar os arquivos de histórias usando padrões de correspondência. Ajuste-a para corresponder à organização das suas pastas.

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

A estrutura vue3-vite

O pacote da estrutura integra o Storybook à sua configuração Vite existente, para que os aliases, os plug-ins e o tratamento de CSS correspondam à compilação real do seu aplicativo.

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

O arquivo preview.ts

.storybook/preview.ts configura a preparação global aplicada a todas as histórias: decoradores globais, parâmetros e a importação 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 preview

Decoradores e plug-ins globais

Se os componentes precisarem de um roteador ou do Pinia, registre-os uma vez em preview.ts por meio de setup para que toda história tenha acesso — sem código repetitivo por história.

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

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

Executando o servidor de desenvolvimento

Inicie o Storybook localmente com o comando de desenvolvimento. A convenção é usar a porta 6006.

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

Criando um Storybook estático

Para a implantação, crie um site estático que possa ser hospedado em qualquer lugar. A integração contínua normalmente o publica para revisão do projeto.

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

Verificação rápida

Verifique sua compreensão sobre a configuração do Storybook para Vue 3.

Recapitulação

Você configurou o Storybook para Vue 3:

  • O Storybook cria e documenta componentes isoladamente.
  • npx storybook@latest init cria a estrutura inicial da configuração e dos exemplos.
  • .storybook/main.ts define o padrão de arquivos de stories, os complementos e a estrutura @storybook/vue3-vite.
  • .storybook/preview.ts gerencia a configuração global (CSS, decoradores e plug-ins como o Pinia).
  • Execute com storybook dev -p 6006; crie um site estático com storybook build.

Perguntas Frequentes

A aula “Configuração do Storybook para Vue 3” é grátis?

Sim — o texto completo de “Configuração do Storybook para Vue 3” é 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 “Configuração do Storybook para Vue 3”?

npx storybook@latest init, .storybook/config, main.js, diretório de histórias e execução. 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 1 de 4.

Quanto tempo leva a aula “Configuração do Storybook para Vue 3”?

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

  1. Configuração do Storybook para Vue 3
  2. Escrita de histórias de componentes
  3. Controles, ações e args
  4. Complementos do Storybook e testes de acessibilidade
← Voltar para Vue Academy