Setting up storybook with vuetify 2

Question

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)

Answer 1

I've had troubles for a long time setting up vuetify 2.3.3 with Storybook 5.3.19. I'm not sure but it seemed that the vue-cli-plugins weren't up2date to handle storybook with vuetify via the vue-cli.

So I made storybook run without the vue-cli via webpack. I'd like to share it here, I hope I can save you some time.

(This way I could globally load all vuetify components)

// .storybook/main.js
const path = require('path');

module.exports = {
  stories: ['../stories/**/*.stories.js'],
  addons: ['@storybook/addon-actions', '@storybook/addon-links', '@storybook/addon-knobs'],

  webpackFinal: async (config, { configType }) => {

    // Use Sass loader for vuetify components
    config.module.rules.push({
      test: /\.s(a|c)ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    config.module.rules.push({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'),
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.esm.js',          
        },
      },
    });

    // Return the altered config
    return config;
  },
};

// .storybook/vuetify_storybook.js
import Vue from 'vue';
import Vuetify from 'vuetify'; // loads all components
import 'vuetify/dist/vuetify.min.css'; // all the css for components
import config from '../src/plugins/vuetifyConfig'; // basic config with theme

Vue.use(Vuetify);

export default new Vuetify(config);

// .storybook/preview.js
import { addDecorator } from '@storybook/vue';
import vuetify from './vuetify_storybook';

addDecorator(() => ({
  vuetify,
  template: `
    <v-app>
      <v-main>
        <v-container fluid >
          <story/>
        </v-container>
      </v-main>
    </v-app>
    `,
}));

I've tried the webpack config without the sass-loader because I'm using the vuetify css directly from the dist folder, but didn't work.

Edit for Storybook 6.3.9

I had to remove the knobs addon for now to get it to run again I might re-add it later.

// .storybook/main.js changes to this

const path = require('path');

module.exports = {
  "stories": [
    "../stories/**/*.stories.@(js)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  webpackFinal: async (config, { configType }) => {
    // `configType` has a value of 'DEVELOPMENT' or 'PRODUCTION'
    // You can change the configuration based on that.
    // 'PRODUCTION' is used when building the static version of storybook.

    // Use Sass loader for vuetify components
    config.module.rules.push({
      test: /\.s(a|c)ss$/,
      use: ['style-loader', 'css-loader', 'sass-loader'],
      include: path.resolve(__dirname, '../'),
    });

    // config.module.rules.push({
    //   test: /\.(png|jpg)$/,
    //   use: ['file-loader'],
    //   include: path.resolve(__dirname, '../'),
    // });

    config.module.rules.push({
      resolve: {
        alias: {
          '@': path.resolve(__dirname, '../src'),
          vue: 'vue/dist/vue.js',
          'vue$': 'vue/dist/vue.esm.js',          
          cesium: path.resolve(__dirname, '../node_modules/cesium/Source'),
        },
      },
    });

    // Return the altered config
    return config;
  },
};

// .storybook/preview.js now looks like this

import vuetify from './vuetify_storybook';

export const parameters = {};

export const decorators = [
  (Story) => ({
    vuetify,
    template: `
    <v-app style="font-family: 'Raleway, sans-serif' !important;">
      <v-main>
        <v-container fluid >
          <story/>
        </v-container>
      </v-main>
    </v-app>
    `,
  }),
];

Answer 2

I had issues with setting up Vuetify 2 and Storybook. Ending up cobbling together a seed site: https://github.com/stephenst/vue-storybook-vuetify-seed/

Answer 3

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