DEV Community

Cover image for Como instalar o Storybook em um projeto Vue + Webpack
Dedicio Coelho
Dedicio Coelho

Posted on

Como instalar o Storybook em um projeto Vue + Webpack

O Storybook por padrão agora instala suas configurações padrões baseado no Vite, porém se já tem um projeto que já utiliza o Webpack, ele não vai funcionar.

Para configurar o Storybook então, precisa definir qual é o builder do projeto usando o parâmetro --builder webpack5.

Basta rodar o código abaixo para adicionar ao seu projeto:

npx storybook@latest init --builder webpack5
Enter fullscreen mode Exit fullscreen mode

Ele adicionará um diretório stories com arquivos de exemplo que pode usar para se guiar em como criar as documentações ou excluir caso não vá usar.

Importante configurar no arquivo .storybook/main.js o local e formato dos arquivos de docmentação que você usará no seu projeto:

  stories: [
    "../stories/**/*.mdx",
    "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
  ],
Enter fullscreen mode Exit fullscreen mode

Nota:
O NPM 7+ instala peerDependecies por padrão, mas se isso for um problema para o seu projeto, adicione também o parâmetro --legacy-peer-deps.

npx --legacy-peer-deps storybook@latest init --builder webpack5
Enter fullscreen mode Exit fullscreen mode

.

Solução encontrada nessa issue

Image of Datadog

The Future of AI, LLMs, and Observability on Google Cloud

Datadog sat down with Google’s Director of AI to discuss the current and future states of AI, ML, and LLMs on Google Cloud. Discover 7 key insights for technical leaders, covering everything from upskilling teams to observability best practices

Learn More

Top comments (0)

A Workflow Copilot. Tailored to You.

Pieces.app image

Our desktop app, with its intelligent copilot, streamlines coding by generating snippets, extracting code from screenshots, and accelerating problem-solving.

Read the docs