Storybook
Get to know about the Storybook tool and how it works to document the project.
We'll cover the following...
About storybook
Storybook is another tool that can be used to develop UI components in isolation. It allows us to work on one component at a time, and we can focus on it outside of our application context.
Installation
Storybook can be added to a Vue project by running the vue add storybook or npx sb init commands. The former only works if our project was scaffolded with Vue CLI because it uses the vue-cli-plugin-storybook plugin. The latter command can be used to add Storybook to Vue and other frameworks. It automatically detects the one we’re using and sets up necessary scripts and configuration accordingly. Note that the npx sb init command doesn’t work on an empty project.
Note: If you try to install Storybook in the same project as Vue Styleguidist, you might have unexpected errors in functionality because both libraries use React under the hood. The issues could arise if the libraries use different versions of React. Therefore, make sure you have only one of these installed in your project.
Let’s start by scaffolding a new Vue 3 project using Vue-CLI by running the vue create vue3-storybook command in the terminal. We’ll be prompted to answer a few questions regarding features ...