Issue with Vuetify treeshaking

[melodyogonna]

Environment:

• Operating System: Darwin
• Node Version: v20.3.1
• Nuxt Version: 3.6.5
• Nitro Version: 2.5.2
• Package Manager: npm@9.6.7
• Builder: vite
• User Config: css, app, build, modules, runtimeConfig, typescript, hooks
• Runtime Modules: @pinia/nuxt@0.4.11, @nuxt/content@2.7.2
• Build Modules: -

Issue: I'm encountering a problem while trying to load vite-plugin-vuetify, to enable treeshaking in vuetify.

RR! Error: Vuetify plugin must be loaded after the vue plugin
ERR!     at configResolved (/Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite-plugin-vuetify/dist/importPlugin.js:19:23)
ERR!     at file:///Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite/dist/node/chunks/dep-439026c8.js:65802:28
ERR!     at Array.map (<anonymous>)
ERR!     at resolveConfig (file:///Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite/dist/node/chunks/dep-439026c8.js:65802:14)
ERR!     at async _createServer (file:///Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/vite/dist/node/chunks/dep-439026c8.js:64808:2
0)
ERR!     at async Module.start (/Users/melody/projects/bifarinfarms/bifarm-frontend/node_modules/@storybook/builder-vite/dist/index.js:159:12527)

Relevant Nuxt Config section:

{
... // Other config
  hooks: {
    "vite:extendConfig": (config: any) => {
      if (config.plugins) {
        config.plugins.push(vuetify());
      }

    },
  },

}

If it helps, here is the error source, I have not been able to find whether I can manually set this vite-vue-plugin myself, it seems to me like nuxi loads it but Storybooks doesn't.

function importPlugin() {
    return {
        name: 'vuetify:import',
        configResolved(config) {
            if (config.plugins.findIndex(plugin => plugin.name === 'vuetify:import') < config.plugins.findIndex(plugin => plugin.name === 'vite:vue')) {
                throw new Error('Vuetify plugin must be loaded after the vue plugin');
            }
        },
  }
}

[moifort]

Hello,

I success to fix it, add to your .storybook/main.ts the snippet below:

import type {StorybookConfig} from "@storybook-vue/nuxt";
import {ViteConfig} from "@nuxt/schema";

const config: StorybookConfig = {
    stories: [
        "../stories/**/*.mdx",
        "../stories/**/*.stories.@(js|jsx|mjs|ts|tsx)",
    ],
    addons: [
        "@storybook/addon-links",
        "@storybook/addon-essentials",
        "@storybook/addon-interactions",
    ],
    framework: {
        name: "@storybook-vue/nuxt",
        options: {},
    },
    docs: {
        autodocs: "tag",
    },
    // Should fix your problem
    viteFinal(config: ViteConfig) {
        const vuetifyImport = config.plugins!.find(({name}) => name === 'vuetify:import')
        config.plugins = [...config.plugins!.filter(({name}) => name !== 'vuetify:import'), vuetifyImport];
        return config;
    }
};
export default config;

It is not a very sexy solution, but it's works for me. I just change the position of the plugin.

Use the last version of the plugin here you will find all the versions: https://stackblitz.com/~/github.com/storybook-vue/storybook-nuxt/pull/49

[chakAs3]

It is not a very sexy solution, but it's works for me. I just change the position of the plugin

Yes this should be done by Vuetify plugin, normalement nuxt handle this case by unshifting the vuePlugin and vueJSX plugin, i don't know why this is happening.
here I'm using Vuetify module from @invictus.codes/nuxt-vuetify works just fine https://github.com/storybook-vue/storybook-nuxt-starter https://github.com/storybook-vue/storybook-nuxt-starter