Vuetify 2.0.2 not supported

Description: https://stackoverflow.com/a/56367842 The new style of latest version of vuetify 2.0.2 requires that vuetify be passed into new Vue()

My .storybook/config.js file:

import Vue from 'vue'
import { configure, addDecorator } from '@storybook/vue';
import StoryRouter from 'storybook-vue-router'
import VueRouter from 'vue-router'

// add vuetify
import '../src/plugins/vuetify'

// add router
Vue.use(VueRouter)
addDecorator(StoryRouter())

// add vuetify
addDecorator(() => ({
      template: '<v-app><v-content><story/></v-content></v-app>',
}))

// add stories
function loadStories() {
  const req = require.context('../src/components/stories', true, /.stories.ts$/);
  req.keys().forEach(filename => req(filename));
}

configure(loadStories, module);

My /plugins/vuetify.ts file:

import Vue from 'vue'
import Vuetify from 'vuetify'

Vue.use(Vuetify)

export default new Vuetify({
	theme: {
		dark: true,
		icons: {
			iconfont: 'fa',
		},
		options: {
			customProperties: true,
		},
		themes: {
			dark: {
				blue: '#002579',
				'dark-grey': '#464646',
				green: '#00BE96',
				grey: '#EEE8E8',
				orange: '#FE5F5A',
				primary: '#FE5F5A',
				white: '#FFFFFF',
			},
		},
	},
})```



The problem:
Receiving a seemingly unrelated error:

Cannot read property ‘dark’ of undefined TypeError: Cannot read property ‘dark’ of undefined at VueComponent.isDark (http://localhost:9001/vendors~main.2f0c8252b2ad5480ce8f.bundle.js:73337:34) at Watcher.get (http://localhost:9001/vendors~main.2f0c8252b2ad5480ce8f.bundle.js:65400:25) at Watcher.evaluate (http://localhost:9001/vendors~main.2f0c8252b2ad5480ce8f.bundle.js:65505:21) at VueComponent.computedGetter [as isDark] (http://localhost:9001/vendors~main.2f0c8252b2ad5480ce8f.bundle.js:65755:17) at VueComponent.themeClasses (http://localhost:9001/vendors~main.2f0c8252b2ad5480ce8f.bundle.js:105182:29) at Watcher.get (http://localhost:9001/vendors~main.2f0c8252b2ad5480ce8f.bundle.js:65400:25) at Watcher.evaluate (http://localhost:9001/vendors~main.2f0c8252b2ad5480ce8f.bundle.js:65505:21) at Proxy.computedGetter (http://localhost:9001/vendors~main.2f0c8252b2ad5480ce8f.bundle.js:65755:17) at Proxy.render (http://localhost:9001/vendors~main.2f0c8252b2ad5480ce8f.bundle.js:73354:15) at VueComponent.Vue._render (http://localhost:9001/vendors~main.2f0c8252b2ad5480ce8f.bundle.js:64491:22)```

[atgjack]

I had the same issue. All you have to do is add vuetify to the addDecorator call.

// add vuetify
import vuetifyConfig from '../src/plugins/vuetify'

addDecorator(() => ({
      vuetify: vuetifyConfig,
      template: '<v-app><v-content><story/></v-content></v-app>',
}))

[adambuczek]

I was actually able to make it work with A-la-carte setup. See revised config.js at the bottom.

@kyleoliveiro @atgjack This setup doesn’t work for me. Vue won’t recognize custom Vuetify components. [Vue warn]: Unknown custom element: <v-app>... [Vue warn]: Unknown custom element: <v-card>... And so on for every Vuetify component. It renders:

<v-app>
  <v-card height="400" width="256" class="mx-auto"></v-card>
</v-app>

• vuetify: ^2.1.7
• @storybook/vue: ^5.2.5

I configured Vuetify using Webpack install instructions and followed your advice configuring storybook with it’s own plugin config.

My .storybook/webpack.config.js

const path = require('path');

module.exports = async ({ config, mode }) => {

    config.module.rules = [
        ...config.module.rules,
        {
        test: /\.s(c|a)ss$/,
        use: [
            'vue-style-loader',
            'css-loader',
            {
                loader: 'sass-loader',
                options: {
                        implementation: require('sass'),
                        sassOptions: {
                            fiber: require('fibers'),
                            indentedSyntax: true
                        }
                    }
                }
            ]
        }
    ];

    config.resolve.alias = {
        ...config.resolve.alias,
        '@': path.resolve(__dirname, '../src')
    }

    return config;
};

.storybook/config.js below

import Vue from 'vue'
import Vuetify from 'vuetify/lib'
import { configure, addDecorator } from '@storybook/vue'

Vue.use(Vuetify)

addDecorator(() => ({
    vuetify: new Vuetify(),
    template: '<v-app><story/></v-app>'
}))

configure(require.context('../stories', true, /\.stories\.js$/), module);

---

I don’t know why v-components wont register globally but I got it to work by following A-la-carte setup to register them explicitly. I import all from Vuetify, extract components only and register them all.

import Vue from 'vue'
import * as _Vuetify from 'vuetify/lib'
import { configure, addDecorator } from '@storybook/vue'

const Vuetify = _Vuetify.default

const isVueComponent = obj => obj.name === 'VueComponent'

const VComponents = Object.keys(_Vuetify).reduce((acc, key) => {
    if (isVueComponent(_Vuetify[key])) {
        acc[key] = _Vuetify[key]
    }
    return acc
}, {})

Vue.use(Vuetify, {
    components: {
        ...VComponents
    }
})

addDecorator(() => ({
    vuetify: new Vuetify(),
    template: '<v-app><story/></v-app>'
}))

configure(require.context('../stories', true, /\.stories\.js$/), module);