Vuetify theme settings not working in Storybook

Question

(Vue version - 2, Vuetify and Storybook - latest)

Consider the following simple button component:

<template>
  <v-btn round
    color="primary">
    <slot></slot>
  </v-btn>
</template>

<script>
export default {
  name: "test-button",
}
</script>

In the App component file, it is invoked like this:

  <v-app>
    <v-layout column justify-center>
      <v-layout row justify-center align-center>
         <test-button @click="testBtnClicked">
           Click It
         </test-button>
      </v-layout>
    </v-layout>
  </v-app>

And the Vuetify setup looks like this in the main.js:

import Vue from 'vue';
import 'vuetify/dist/vuetify.min.css';
import Vuetify from "vuetify";
import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, {
  theme: {
    primary: colors.indigo.base,
    info: colors.blue.lighten2,
    accent: colors.green.lighten1,
    error: colors.red.darken2
  }
});

So far, so good - I get a nice indigo button in the middle of the frame, which is what I would expect.

Now, in the Storybook config, I'm using the same lines as in main.js to set up Vuetify, and my Storybook file looks like this:

import { storiesOf } from "@storybook/vue";

import TestButton from "./TestButton.vue";

storiesOf("TestButton", module)
  .add("button template", () => ({
    template: '<test-button :rounded="true">round</test-button>',
    components: {TestButton}
  }))

This renders the button in Storybook, but the theme settings don't happen, to wit: the button is not indigo, it is white. The rest of the Vuetify attributes seem to be fine - it looks like a Vuetify rounded button, with white text.

I'm not sure if this is a Vuetify issue or a Vue issue or a Storybook issue (or a user-error issue on my part). If anyone has done this, I'd appreciate some insight.

Here's my webpack.config.js (in .storybook):

module.exports = (baseConfig, env, defaultConfig) => {

  defaultConfig.plugins.push(new VueLoaderPlugin());

  return defaultConfig;
};

Answer 1

I have the problem too.

After reading vuetify's code, seems the generation of CSS, and injection of the theme is made in the VApp mixin app-theme located here.

So, I think the problem is not linked to storybook, but vuetify instead.

By wrapping the component I wish to test with a v-app, it's ok.

So, for now, please try to add a decorator in your config.js like this :

import { configure, addDecorator } from '@storybook/vue';
import 'vuetify/dist/vuetify.css';

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

Vue.use(Vuetify, {
  theme: {
    // your colors
  },
});

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

...

Sounds ok for you ?

(answer too on github : https://github.com/storybooks/storybook/issues/4256#issuecomment-440065778)

Answer 2

I ran into the issue a few months ago so its the not freshest in my mind. You need to import the plugin that adds Vuetify to Vue. Here is the config.js file in my .storybook folder.

// #### /.storybook/config.js
import { configure } from '@storybook/vue';

import Vue from 'vue';
import Vuex from 'vuex'; // Vue plugins
import '@/plugins/allPlugins';

// Install Vue plugins.
Vue.use(Vuex);

const req = require.context('../src', true, /\.stories\.js$/)

function loadStories() {
  req.keys().forEach((filename) => req(filename))
}

configure(loadStories, module);

plugins/allPlugins

import Vue from 'vue'; // <---- important 
import './vuetify'; // <---- important 


import WebCam from 'vue-web-cam';
import Chat from '@/libs/vue-beautiful-chat/index';
import './styles';

import './ellipsis';
import 'viewerjs/dist/viewer.css';
import Viewer from 'v-viewer';

Vue.use(WebCam);
Vue.use(Chat);
Vue.use(Viewer);

plugins/vuetify

import Vue from 'vue';
import {
  Vuetify,
  VApp,
  ...
} from 'vuetify';

import colors from 'vuetify/es5/util/colors';

Vue.use(Vuetify, {
  components: {
    VApp,
    ...
  },
  theme: {
    primary: colors.blue.lighten1,
    ...
  },
});

The reason I separated out all plugins was because of custom styles and other plugins that I was more control of when importing. If you need custom styles you will need to import both Vuetify plugin and custom styles.