storybook-addon-vuetify3

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.