Storybook with Vue.js

This repository contains the example code for the Storybook with Vue.js course on Vue School.

Storybook lets us create a visual component library and playground, where we can document, showcase, and interact with our Vue.js components in an isolated environment.

In this Storybook course, you will learn how to install and configure Storybook in any Vue.js project with Vue CLI. You will also learn how to organize and write stories to showcase different states of your Vue.js components.

The great thing with Storybook is that it is decoupled from our project, which gives us the ability to quickly prototype or demo features and progress. Imagine being able to demonstrate a date picker component in its different states quickly (open, closed, selected, disabled, etc.), in a separate (local or online) website.

A well put-together Storybook suite can benefit anyone from individuals and freelancers to larger multi-disciplinary teams.

Since every Vue.js project is not installed with Vue CLI, we'll have a dedicated chapter where we cover how to install Storybook in a custom Vue.js project that does not use Vue CLI. We will also cover how to configure Storybook with TailwindCSS and Vuetify.

This is the ultimate course if you want to begin using Storybook in your Vue.js projects, regardless if you're using the Vue CLI or not.

Click here to watch the Storybook with Vue.js course.

cli-project

Project setup

npm ci

Compiles and hot-reloads for development

npm run serve

Compiles and minifies for production

npm run build

Lints and fixes files

npm run lint

Opens storybook dev server

npm run storybook:serve

Creates a static storybook site ready to publish

npm run storybook:build

Customize configuration

See Configuration Reference.