vue-cli-plugin-vuetify-storybook

vue-cli-plugin-vuetify-storybook

A Vuetify Storybook Plugin for vue-cli@3.0

💿 Install

vue add vuetify-storybook

Once installed, you can run:

yarn serve:storybook
# OR
npm run serve:storybook

🚀 Usage

To add new stories, simply create a new file that contains .stories.js. An example exists in .storybook/stories/example.stories.js of your project.

Creating stories

If you are using vue-cli-plugin-vuetify-cli, stories will be automatically generated when you create new components.

// A helper function to faciliate the generation of stories
import { storyFactory } from '../util/helpers'

// Components
import { AnotherComponent } from 'path/to/component'

// Generate a factory function
// Will automatically bootstrap the story components
const story = storyFactory({
  // Can pass in an import function
  MyComponent: () => import('path/to/component'),
  // Or explicitly import and use
  AnotherComponent,
})

export const asDefault = () => story({
  template: `<my-component></my-component>`,
})

export const withAnotherComponent = () => story({
  template: `
    <my-component>
      <another-component></another-component>
    </my-component>
  `,
})

💪 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