storybook-addon-vuetify3

安装

yarn add -D storybook-addon-vuetify3

使用

将 storybook-addon-vuetify3 插件添加到 .storybook/main.js 中

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

将 vueitfy 装饰器添加到 .storybook/preview.js 中

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

export const decorators = [
  withVuetify
]

您可以添加 withThemeProvider 来使用 Vuetify 主题设置。但请确保按照所示添加 globalTypes。

/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
]

许可证

根据 MIT 许可证 授权。