New
Storybook for full-stack developersAutomate with Chromatic
Star75,295
Back to integrations
Add your integration
Categories
  • ⭐️ Popular
  • 🧩 Essentials
  • 🛠 Code
  • ⚡️ Data & state
  • ✅ Test
  • 💅 Style
  • 🎨 Design
  • ⚙️ Appearance
  • 🗄 Organize
How to install addons Create an addon
storybook-addon-vuetify3
storybook addon for decoration style with vuetify3
npm install storybook-addon-vuetify3
Last updated 4 months ago
453
Downloads per week
Readme View on GitHub

storybook-addon-vuetify3

Install

yarn add -D storybook-addon-vuetify3

Usage

Add storybook-addon-vuetify3 addon to .storybook/main.js

module.exports = {
  addons: [
    'storybook-addon-vuetify3'
  ]
}

Add vueitfy decorator to .storybook/preview.js

import { withVuetify } from 'storybook-addon-vuetify3/dist/decorators'

export const decorators = [
  withVuetify
]

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

/src/plugins/vuetify.js

// Styles
import '@mdi/font/css/materialdesignicons.css'
import 'vuetify/styles'

// Vuetify
import { createVuetify } from 'vuetify'
import * as components from 'vuetify/components'
import * as directives from 'vuetify/directives'

export const myCustomLightTheme = {
  dark: false,
  colors: {
    background: '#FFFFFF',
    surface: '#FFFFFF',
    primary: '#123456',
    'primary-darken-1': '#3700B3',
    secondary: '#03DAC6',
    'secondary-darken-1': '#018786',
    error: '#B00020',
    info: '#2196F3',
    success: '#4CAF50',
    warning: '#FB8C00',
  }
}

export default createVuetify(
  // https://vuetifyjs.com/en/introduction/why-vuetify/#feature-guides
  {
    components,
    directives,
    theme: {
      defaultTheme: 'myCustomLightTheme',
      themes: {
        myCustomLightTheme,
      }
    }
  }
)

.storybook/preview.js

import { withVuetify } from 'storybook-addon-vuetify3/dist/decorators'
import { myCustomLightTheme } from "../src/plugins/vuetify";

export const globalTypes = {
  vuetify: {
    theme: {
      defaultTheme: 'myCustomLightTheme',
      themes: {
        myCustomLightTheme
      }
    }
  }
}

export const decorators = [
  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