Getting Storybook to work with Vuetify 2.0
This is just a short post regarding how I got Storybook to play nicely with Vuetify after upgrading to Vuetify 2.0.
As most of you already know, Vuetify 2.0 recently came out. That’s awesome, but it also came with a few breaking changes, the primary of which is their move towards making Vuetify a Vue plugin, which had to be bootstrapped to the primary Vue instance.
This is fine and all, except it broke my Storybook build.
As I’ve mentioned, Vuetify now has to be bootstrapped to the Vue app you’re using it on, which means you will need to use the addDecorator helper method to achieve this.
import { storiesOf } from '@storybook/vue';
import vuetify from '@/plugins/vuetify';
import Header from '@/components/Header.vue';
storiesOf('Header', module)
.addDecorator(() => ({
vuetify, // Important!
template: '<v-app><v-content><story/></v-content></v-app>'
}))
.add('default', () => ({
components: {
Header
},
template: '<header/>'
}));
And that’s it! My Storybook build is back up and running, and everybody’s happy again.
I hope this helps anyone else who ran into this issue.
