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)