Vuetify 3 and storybook 6 - styles and components do not work

user_6335097 0
Viewed 541

I´ve been researching a lot about Vuetify + Storybook integration.

I installed Vuetify using Vite and then installed the storybook/vue3 plugin using:

npx sb init --builder storybook-builder-vite

The problem is that every component that I created is not using the Vuetify styles. I read here that I need to extend the Storybook app so my preview.js looks like:

// .storybook/preview.js

import { app } from '@storybook/vue3';
import vuetify from '../src/plugins/vuetify'

app.use(vuetify);

export const decorators = [
  (story) => ({
    components: { story },
    template: '<v-app><story /></v-app>',
  }),
];

But this doesn't seem to work. It doesn't throw any errors in the terminal and not in the browser but the vuetify styles and components do not work. My components are being render normally with Vuetify if I try to run the app itself.

Any ideas? I´m totally lost. Maybe there´s no support since Vuetify 3 is on alpha? Or this is a storybook issue?

Here´s my repo if you want to check it out https://github.com/heyimnowi/vue-ui-library

vuetifyjs3 storybook
1 Answers

OMG I cannot believe I solve it by just doing this:

const path = require('path')
const vuetify = require('@vuetify/vite-plugin'); // THIS

module.exports = {
  "stories": [
    "../src/**/*.stories.mdx",
    "../src/**/*.stories.@(js|jsx|ts|tsx)"
  ],
  "addons": [
    "@storybook/addon-links",
    "@storybook/addon-essentials"
  ],
  "framework": "@storybook/vue3",
  "core": {
    "builder": "storybook-builder-vite"
  },
  async viteFinal(config, { configType }) {

    config.resolve.alias['~storybook'] = path.resolve(__dirname)
    config.resolve.alias['@'] = path.resolve(__dirname, '..', 'src')

    config.css = {
      preprocessorOptions: {
        scss: { additionalData: `@import "src/styles/application.scss";` },
      },
    };

    config.plugins = [
      ...config.plugins,
      vuetify() // THIS
    ];

    return config;
  }
}
user_63350970
Related