vue-cli-plugin-vuetify-storybook

A Vuetify Storybook Plugin for [email protected]

💿 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

📑 License

MIT

Copyright (c) 2016-present Vuetify LLC