vuetifyjs/vue-cli-plugin-vuetify-storybook

📖 A Vue CLI 3 Plugin for using Storybook with Vuetify

vue-cli-plugin-vuetify-storybook

A Vuetify Storybook Plugin for vue-cli

⚠ Archived

This package has been moved to the main vue-cli-plugins repository.

💪 Supporting Vuetify

Vuetify is an open source MIT project that has been made possible due to the generous contributions by community backers. If you are interested in supporting this project, please consider:

• Becoming a sponsor on Github (supports John)
• Becoming a backer on OpenCollective (supports the Dev team)
• Become a subscriber on Tidelift
• Make a one-time payment with Paypal
• Book time with John

📑 License

MIT

Copyright (c) 2016-present Vuetify LLC

vue-cli-plugin-vuetify-storybook's Issues

Idea: Add global knobs to toggle/edit $vuetify props in stories

In .storybook/addon-vuetify/decorator.js I added a knob to toggle the theme like so:

// inside of the `wrapper()` function
return Vue.extend({
  vuetify,
  components: { WrappedComponent },
  props: {
    dark: {
      default: boolean('Dark Theme', false), // or options.theme.dark see #2 
    },
  },
  watch: {
    dark (val) {
      this.$vuetify.theme.dark = val
    },
  },
  template: `
    <v-app>
      <v-container fluid>
        <wrapped-component />
      </v-container>
    </v-app>
  `
})

Now in all of my stories, there's a knob that allows me to toggle Vuetify's dark theme on and off to see what components look like in those scenarios. Here are some screenshots:

Dunno if this kinda thing should be baked into the addon or not, but I thought it was a neat trick that I'd share.

Idea: Maybe import vuetify options directly from app

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.

Feature Request: add custom SASS variables to webpack

In my .storybook/webpack.config.js file, I was able to import my custom SASS variables like this:

const path = require('path')

module.exports = async ({ config }) => {
  config.resolve.alias['~storybook'] = path.resolve(__dirname)
  config.resolve.alias['@'] = path.resolve(__dirname, '..', 'src')

  config.module.rules.push({
    resourceQuery: /blockType=story/,
    loader: 'vue-storybook'
  })

  config.module.rules.push({
    test: /\.s(a|c)ss$/,
    use: [
      'style-loader',
      'css-loader',
      {
        loader: 'sass-loader',
        options: {
          prependData: `@import '${path.resolve(__dirname, '..', 'src', 'scss')}/variables.scss'`
        }
      }
    ],
    include: [
      path.resolve(__dirname, '../'),
    ],
  })

  return config
}

This works for my particular setup, but not everyone will define their custom variables like I have. I suggest that this plugin should be updated to do the same thing that vue-cli-plugin-vuetify does, which is to detect whether custom variables are saved in src/(sass|scss|styles)/variables.s(c|a)ss and load them appropriately.

js-beautify is might be missing form devDependencies.

npm run serve:storybook fails because of missing dependencies.

ERROR in ./.storybook/addon-show-vue-markup/decorator.js
Module not found: Error: Can't resolve 'js-beautify' in '~/.storybook/addon-show-vue-markup'

For now i installed the dev dependencies manually:
npm install --save-dev js-beautify