I am setting up a project with storybook and vuetify 2. Just importing vuetify to my storybook config file make the components work, but the colors and themes are not working and when add the decorator v-app I get the following error: "index.js:49 TypeError: Cannot read property 'dark' of undefined"
import { configure, addDecorator } from '@storybook/vue'
import { themes } from '@storybook/theming'
import Vue from 'vue'
import Vuetify, { VApp } from 'vuetify/lib'
import 'vuetify/dist/vuetify.min.css'
import 'material-design-icons-iconfont/dist/material-design-icons.css'
import colors from 'vuetify/lib/util/colors';
Vue.component('v-app', VApp)
Vue.use(Vuetify, {
iconfont: 'md',
theme: {
themes: {
light: {
primary: colors.purple,
secondary: colors.grey.darken1,
accent: colors.shades.black,
error: colors.red.accent3,
},
dark: {
primary: colors.purple
},
}
}
})
addDecorator(() => ({
template: '<v-app><story/></v-app>',
}));
const req = require.context('../../src/stories', true, /.stories.js$/)
function loadStories() {
req.keys().forEach(filename => req(filename))
}
configure(loadStories, module)
Just did it adding the default decorator to my stories.
import vuetify from '@/plugins/vuetify';
.addDecorator(() => ({
vuetify,
template: '<v-app><story/></v-app>'
}))
Where the vuetify import is the default plugin generated by vuetify