Question: Use with Vuetify and scss variables performance

[richardmward]

Hi,

Using this plugin, I've managed to easily set up a storybook that uses my own components, which wrap around some Vuetify components. I use a styles/variables.scss file in order to customise the general look and feel of Vuetify, but am finding that the performance is significantly worse when using yarn storybook:serve than when using yarn serve. For example, changing $border-radius-root: 8px !default; to another number takes in the region of 10s when using yarn serve, but takes around 40s when using yarn storybook:serve. I'm aware that this it is expected that these changes can be slow - but I'd expect it to be equivalent to the a normal serve.

I wonder if there is some webpack config that isn't equivalent?

preview.js

import { VApp, VContainer } from "vuetify/lib"
import { addDecorator } from "@storybook/vue"
import vuetify from "../../src/plugins/vuetify"

addDecorator(() => ({
    vuetify,
    components: {
        VApp, VContainer
    },
    render() {
        return (
            <v-app>
                <v-container fluid><story /></v-container>
            </v-app>
        )
    }
}))

vuetify.js

import Vue from 'vue';
import Vuetify from 'vuetify/lib/framework';
import '@fortawesome/fontawesome-free/css/all.css'

Vue.use(Vuetify);

export default new Vuetify({ ... });

[richardmward]

I think I have just realised - my vuetify.js file has import Vuetify from 'vuetify/lib/framework';, whereas in preview.js I am importing from import { VApp, VContainer } from "vuetify/lib".

[pksunkara]

Does it solves the issue?

[richardmward]

Yes, the issue was having the import { VApp, VContainer } from "vuetify/lib" in preview.js because it meant I lost the performance benefit of using import Vuetify from 'vuetify/lib/framework' in vuetify.js (which is why it was faster when just doing yarn serve).

To resolve it, I have put a layer of indirection inbetween the decorator and the Vuetify components, and now get sub 10s rebuilds when changing variables.scss

preview.js

import { addDecorator } from "@storybook/vue"
import StoryWrapper from "@/components/StoryWrapper.vue"
import vuetify from "@/plugins/vuetify"

addDecorator(() => ({
    vuetify,
    components: {
        StoryWrapper
    },
    render() {
        return (
            <story-wrapper><story /></story-wrapper>
        )
    }
}))

StoryWrapper.vue

<template>
  <v-app>
    <v-container fluid>
      <slot></slot>
    </v-container>
  </v-app>
</template>

<script>
export default {
  name: "story-wrapper"
};
</script>