Skip to content
πŸ“– A Vue CLI 3 Plugin for using Storybook with Vuetify
JavaScript CSS
Branch: master
Clone or download
Latest commit 3d8775a Nov 11, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
generator chore: remove deprecated file Nov 2, 2019
.gitignore
.release-it.json feat: init commit Oct 15, 2019
LICENSE.md
README.md
index.js
package.json chore: release v0.1.1 Nov 11, 2019
yarn.lock feat: init commit Oct 15, 2019

README.md

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:

πŸ“‘ License

MIT

Copyright (c) 2016-present Vuetify LLC

You can’t perform that action at this time.