Storybook

Add to an existing project without Storybook

npx storybook@latest init

Change preview.js

import { setup } from '@storybook/vue3';
import { createVuetify } from 'vuetify';
import 'vuetify/styles'; // Ensure Vuetify styles are loaded

// Import theme styles (optional but recommended)
import { aliases, mdi } from 'vuetify/iconsets/mdi-svg';
import '@mdi/font/css/materialdesignicons.css';

import * as components from 'vuetify/components';
import * as directives from 'vuetify/directives';

const vuetify = createVuetify({
  components,
  directives,
  icons: {
    defaultSet: 'mdi',
    aliases,
    sets: { mdi },
  },
  theme: {
    defaultTheme: 'light', // Explicitly set default theme
  },
  
});

setup((app) => {
  app.use(vuetify);
});

/** @type { import('@storybook/vue3').Preview } */
const preview = {
  parameters: {
    controls: {
      matchers: {
        color: /(background|color)$/i,
        date: /Date$/i,
      },
    },
  },
};

export default preview;