Integrate Vuetify and Storybook

Vuetify is a Vue-based component library designed with Google's Material Design spec. This recipe shows you how to get the most out of Vuetify in Storybook.

This recipe assumes that you have a Vue 3 app using Vuetify v3 and have just set up Storybook 7.0 using the getting started guide. Don’t have this? Follow Vuetify’s installation instructions then run:

How to setup Vuetify and Storybook

Vuetify is a popular UI framework for Vue.js that provides a variety of pre-designed components, while Storybook is a tool for creating and testing UI components in isolation. This post will show you how to integrate these two tools to create a powerful and flexible development environment for building user interfaces with Vuetify.

This post will explain how to:

🔌 Setup Vuetify with Storybook
🧱 Use Vuetify in your components
🎨 Switch Vuetify themes in a click

If you’d like to see the example code of this recipe, check out the example repository on GitHub. Let's get started!

Completed Vuetify example with theme switcher

Register Vuetify in Storybook

To get started, you'll need to add Vuetify’s fontloader and plugin to your Storybook configuration. To do this, add the following to your .storybook/preview.js file:

Here registerPlugins loads Vuetify’s fonts and registers all of its components with Storybook’s Vue app.

Using Vuetify Components

Let’s update some of our example components to use Vuetify instead. Open up the Button component in ./src/stories/button.vue.

Unchanged example button component from Storybook init

Currently, it’s not looking very Vuetiful so let’s make some changes. Replace the contents of ./src/stories/Button.vue with the following code:

Now looking back at Storybook, the Vuetify button is being used. It even changed in the page-level stories.

Converting the example button into a Vuetify button

Add a theme switcher tool using `globalTypes`

Vuetify comes out of the box with a light and dark theme that you can override or add to. To get the most out of your stories, you should have a way to toggle between all of your themes.

Switching to Vuetify's dark theme in Storybook

To add our switcher, declare a global type named theme in .storybook/preview.js and give it a list of supported themes to choose from.

This code will create a new toolbar menu to select your desired theme for your stories.

Add a `withVuetifyTheme` decorator

There needs to be a way to tell Vuetify to use the theme selected in the toolbar. This can be done using a decorator.

Below I created a new file in .storybook called withVuetifyTheme.decorator.js that will take our global theme value and update Vuetify’s current theme.

All that is left to do is give this decorator to Storybook to wrap our stories in. Add the decorator to the decorator array in .storybook/preview.js:

Get involved

Now you're ready to use Vuetify with Storybook. 🎉 Check out the example repo for a quick start.

If you use Vuetify at work, we'd love your help making an addon that automatically applies the configuration above. Join the maintainers in Discord to get involved, or jump into addon docs.