New
Storybook for full-stack developersAutomate with Chromatic
Star75,299
Back to integrations
Add your integration
Categories
  • โญ๏ธ Popular
  • ๐Ÿงฉ Essentials
  • ๐Ÿ›  Code
  • โšก๏ธ Data & state
  • โœ… Test
  • ๐Ÿ’… Style
  • ๐ŸŽจ Design
  • โš™๏ธ Appearance
  • ๐Ÿ—„ Organize
How to install addons Create an addon
@socheatsok78/storybook-addon-vuetify
๐Ÿ““ Storybook's Vuetify ๐Ÿ‰ Addon
npm install @socheatsok78/storybook-addon-vuetify
Last updated about 1 year ago
2.6k
Downloads per week
Readme View on GitHub

@socheatsok78/storybook-addon-vuetify

๐Ÿ““ Storybook's Vuetify ๐Ÿ‰ Addon

@npm license

Install

yarn add -D @socheatsok78/storybook-addon-vuetify

Usage

Add @socheatsok78/storybook-addon-vuetify addon to .storybook/main.js

module.exports = {
  addons: [
    '@socheatsok78/storybook-addon-vuetify'
  ]
}

Add vueitfy decorator to .storybook/preview.js

import { withVuetify } from '@socheatsok78/storybook-addon-vuetify/dist/decorators'

export const decorators = [
  withVuetify
]

You can add withThemeProvider to use vuetify theme settings. But make sure to add globalTypes as shown.

import { withVuetify, withThemeProvider } from '@socheatsok78/storybook-addon-vuetify/dist/decorators'

export const globalTypes = {
  theme: {
    name: 'Theme',
    description: 'Global theme for components',
    defaultValue: 'light',
    toolbar: {
      icon: 'circlehollow',
      items: ['light', 'dark']
    }
  }
}

export const decorators = [
  withThemeProvider,
  withVuetify
]

License

Licensed under the MIT License.

Join the community
5,867 developers and counting
WhyWhy StorybookComponent-driven UI
Open source software
Storybook

Maintained by
Chromatic
Special thanks to Netlify and CircleCI