Vuetify in Storybook
⚠️A few things have changed since the full release of Storybook 7.0. For a more up-to-date guide to integrating Vuetify in Storybook, check out our recipe in the integration catalog.
App design can be complex, with many options for fonts, typography, spacing and colors. Vuetify simplifies this by offering pre-designed themeable components for a cohesive look, based on Google's Material Design guidelines.
Storybook is a frontend workbench for building UIs in isolation. By combining Storybook and Vuetify, you can build UIs faster without all the grunt work. As of Storybook 7.0, this is even easier with out of the box Vite support. 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.
In this post, we 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!
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. We’ll use the Button component in ./src/stories/button.vue.
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, our button is now the Vuetify button. It even changed in the page-level stories.
Add a theme switcher tool using globalTypes
Vuetify comes out of the box with a light and dark theme but you can override them and add more. To get the most out of your stories, you should have a way to toggle between all of your themes.
Switching from Vuetify's light theme to dark theme using a Storybook theme switcher
To add a theme switcher, declare a global variable named theme in .storybook/preview.js and give it a list of supported themes to choose from.
This code will create a new toolbar dropdown 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.
Now give this decorator to Storybook to wrap our stories in. To do this, add the decorator to the decorator array in .storybook/preview.js
Wrapping up
Vuetify offers a large collection of readymade Material Design components to make building Vuetiful UIs a breeze. In just a few steps, you can setup Vuetify in Storybook to create a powerful development environment.
Get involved
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.
New recipe: Vuetify in Storybook ✨@vuetifyjs offers a collection of ready-made Vue components to get you building UIs right away.
This recipe shows you how to:
🔌 Setup Vuetify with Storybook
🎨 Add a theme switcher to test light/dark modeshttps://t.co/BcdmMrJQCf pic.twitter.com/ooWSrmXuYY
— Storybook (@storybookjs) January 19, 2023