If you’ve ever used Vue.js in your projects then you must surely be familiar with Vuetify. And if you ever cared about testing and having good documentation of your view components then you must surely be familiar with Storybook too.

But have you ever tried making them work together?

I have.

And It took some time from me. Let’s save yours.

Storybook works with Vue.js out of the box by just installing it. You can start using your own custom components without making any configuration. But that’s not the case for Vuetify.

Here is how that solved it for me:

Introduction

Just in case Vuetify and Storybook are new to you, here is a quick explanation of both of these (then we immediately dive into what you’ve actually come for).

What is Vuetify?

Vuetify is a component framework that follows Google’s Material Design guidelines.

That’s it.

You have a bunch of ready-made components (and helpers, layouts, animations…) which are created the way Google wants them to be. It’s basically Bootstrap, but only more material, and more awesome. Seriously, it has everything you need to build beautiful looking UI.

Check it out if you haven’t already.

What the heck is Storybook?

Storybook is a user interface development environment and playground for UI components

This is how the developers of Storybook explains it.

In very basic terms: You open up a new blank JavaScript file, import your component, then use the methods Storybook provides to fire the actions your components have, pass the props your components expect, etc. and showcase how they behave in an isolated environment, completely independent from your other development mumbo jumbo.

Click for more about Storybook.

Let’s Integrate This Two Greatness

Now that we know the two mentioned terms are related to each other, why not use them together?

Installation

Note: I will be using the latest versions available for Vue (2.6.10), Vuetify (1.5.5) and Storybook (5.1.9) as of the writing of this article.

  • Let’s create a new Vue project using Vue CLI (make sure you have Vue CLI installed to follow along):
$ vue create storybook-vuetify

Choose default preset on the prompted options to get started quickly.

  • Now let’s install vuetify:
$ vue add vuetify

Again, choose default preset and continue.

  • Finally, Storybook:
$ npx -p @storybook/cli sb init

It should automatically recognize that you are using Vue.js.  If it failed to, however, use add –type vue (with two dashes) at the end of the above command.

Integration

  1. First of all, we need to extend Storybook Webpack so it can transform files that are used within Vuetify.

To achieve this, we need to put Storybook to full-control-mode.

Simply, create a file called webpack.config.js in .storybook folder which was created when you installed Storybook.

Then add the below snippet and save.

The above code simply tells Webpack to:

  • look for the files whose extensions are .vue, .css, .less, .scss, .sass or .html
  • transform Less and Stylus files

Now Vuetify components can be imported to be used on our stories.

  1. We need to import Vuetify to Storybook and wrap all of our stories with v-app tag. Wrapping Vuetify components with this tag is required by Vuetify.

To achieve this replace the existing config.js file in your .storybook folder with below snippet.

The addDecorator method Storybook provides us is what makes the wrapping stories with v-app tag possible.

  1. The final step is importing the Vuetify components we will use in our stories to plugins/vuetify.js file using a la carte system. Meaning, importing the each to be used component individually.

Let’s say we want to use v-btn in our stories. For this, we need to import v-btn as VBtn and register it to components key of Vue.use method options.

Optionally, instead of importing to vuetify.js file and making it globally available for our stories, we can import VBtn directly to our stories and register it to components key.

Let’s Use It In Action

We have already imported VBtn. Let’s get it showcased in Storybook.

We are already greeted with some stories that are generated when we first installed Storybook. Let’s remove all of them except index.stories.js. And clear all the non-existent imports in that file as well and paste below:

Hit save and go:

$ npm run storybook

in your terminal.

Voila!

 

Conclusion

You can find the source code for the above example in our GitHub repo.

If you have any suggestions, improvements or corrections please let me know.

Thanks for reading and happy coding.

Credits: This article is the source which I’ve dived into and gathered what’s written here by only focusing on the Vuetify and Storybook integration. Kudos to them. You can check it out if you are interested in adding TypeScript to your project on top of these. I haven’t tried it though, so no guarantees for its chance of working properly.
Also, the reading experience of their website is awful 🙁 (You’ve been warned.)