Storybook with Vue.js

Document and showcase Vue.js components in an elegant UI with Storybook. Perfect for multi-disciplinary teams!

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.

What you will learn
Learn what Storybook is
Learn how to configure Storybook with your Vue.js project
Learn how to document your Vue.js components with Storybook stories
Learn how to organize your Storybook stories
Learn how to decorate your Storybook stories
Learn how to configure and use Storybook add-ons
Learn how to use TailwindCSS with Storybook and Vue.js
Learn how to use Vuetify with Storybook and Vue.js