How to setup in Nuxt 3 + Vuetify?

[kouwasi]

I'm trying to use the Histoire in my Nuxt 3 and Vuetify project, But It dosen't work.

I did setup with following Histoire guide.
It works without Vuetify components, But It's not working with it.

Here is my browser console output.

I installed @histoire/plugin-vue and @histoire/plugin-nuxt, then create config file same as guide.
A story file is working correctly with Vue component with pure HTML, but it is not working on Vuetify component.

I have tryied to make a histoire.setup.ts like that.

import { defineSetupVue3 } from '@histoire/plugin-vue'
import { createVuetify } from 'vuetify'

export const setupVue3 = defineSetupVue3(({ app, addWrapper }) => {
  const vuetify = createVuetify()
  app.use(vuetify)
})

But, It still not working correctly.

Somebody help me😭

[merijnkoppes]

For me this worked

let vuetifyInstance: ReturnType<typeof createVuetify> | null = null;
function getVuetifyInstance() {
  if (!vuetifyInstance) {
    vuetifyInstance = createVuetify({
      components,
      directives,
      icons: {
        defaultSet: "mdi",
        aliases,
        sets: { mdi },
      },
      theme: {
        defaultTheme: vuetifyThemeConfig.defaultTheme,
        themes: vuetifyThemeConfig.themes as Record<string, ThemeDefinition>,
      },
    });
  }
  return vuetifyInstance;
}

And then

export async function setupVue3({ app }: { app: App }) {
  const vuetify = getVuetifyInstance();
  const pinia = getPiniaInstance();

  app.use(vuetify);
  

I also import these:

import "vuetify/styles";
import "@mdi/font/css/materialdesignicons.min.css";
import * as components from "vuetify/components";
import * as directives from "vuetify/directives";
import { aliases, mdi } from "vuetify/iconsets/mdi";
import { vuetifyThemeConfig } from "./plugins/vuetify";
import { createVuetify, type ThemeDefinition } from "vuetify"; ```