vuetifyjs / vue-cli-plugin-vuetify-storybook

📖 A Vue CLI 3 Plugin for using Storybook with Vuetify

Geek Repo:Geek Repo

Github PK Tool:Github PK Tool

Idea: Maybe import vuetify options directly from app

morphatic opened this issue · comments

This is a change I made to my app's addon-vuetify designed to import all of my app's custom theme options.

I modified my app's plugins/vuetify.js to export the base options:

export const options = {
  icons: {
    iconfont: 'mdiSvg',
  },
  theme: {
    dark: true,
    // ... etc., etc., etc....
  }
}

export default new Vuetify(options)

Then in .storybook/addon-vuetify/decorator.js, I imported them and did something like:

// at the top with other imports
import { options } from '../../src/plugins/vuetify'

export default makeDecorator({
  name: 'withVuetify',
  parameterName: 'vuetify',
  wrapper: (storyFn, context, { parameters = {} }) => {
    const vuetify = new Vuetify(deepmerge(options, parameters))
    // ... everything else is basically the same ...
  }
})

I always have custom options in my plugins/vuetify.js file in all my apps, so I don't know if this would break simpler installs. Maybe there's a way to detect that it's setup this way and adjust accordingly?

Also, I have a question: what is the purpose of the parameters param in the wrapper() function??? I logged it's value, which was always an empty object, and I tried to tweak things that might give it a value, but I couldn't figure out how to modify it. If it never does anything we could simplify this decorator by not worrying about merging it into the Vuetify instance.