Unable to run with storybook

[AndreyYolkin]

My setup:

• Operating System: Darwin
• Node Version: v20.5.0
• Nuxt Version: 3.9.0
• CLI Version: 3.10.0
• Nitro Version: 2.8.1
• Package Manager: pnpm@8.10.5
• Builder: -
• User Config: modules, i18n, devtools
• Runtime Modules: @nuxtjs/i18n@8.0.0, vuetify-nuxt-module@0.8.0
• Build Modules: -

Reproduction

https://github.com/AndreyYolkin/storybook-vuetify-issue

Description

Thank you for your titanic work on building this module. I've tried to add storybook into my project, but for some reasons vuetify works in dev mode and have some problems inside storybook. Please follow the readme to get the error in reproduction.

Additional details

1. There is a working example with another nuxt-vuetify module (not maintained anymore): https://github.com/storybook-vue/storybook-nuxt-starter
2. I've also left the comment in storybook-nuxt repo
   Vuetify not working storybook-vue/storybook-nuxt#42 (comment)

[userquin]

Vuetify components seems to be loaded without defaults, I'm checking if there is a problem with vuetify post plugin in this module and storybook.

FYI: I don't see any page using any Vuetify component in https://github.com/storybook-vue/storybook-nuxt-starter

[userquin]

I don't know why applyNuxtPlugins are called after rendering the pages, I just added a breakpoint in the nuxtjs/i18n warning, storybook should review Nuxt 3 integration logic.

This module enables treeshaking feature via vuetify vite plugin (there is no way to use all components, you need to add them to vuetify.vuetifyOptions.components in the nuxt configuration or vuetify config file), the deprecated nuxt module by default not enabling that feature IIRC (maybe also a problem with nuxt vuetify sequential post plugin, i18n is installed and configured in the app).

[AndreyYolkin]

FYI: I don't see any page using any Vuetify component in https://github.com/storybook-vue/storybook-nuxt-starter

Of course, here is the direct link to component:
https://github.com/storybook-vue/storybook-nuxt-starter/blob/master/components/vuetify/index.vue

And Story:
https://github.com/storybook-vue/storybook-nuxt-starter/blob/master/stories/Vuetify.stories.ts

Only these files, pages folder looks like boilerplate

[userquin]

If you run the dev server, you can see vuetify components imports at the bottom:

Same component in storebook (missing imports):

[userquin]

The i18n module seems to be fine, so the problem should be in storebook: it seems it is building the project but I have no idea what's doing behind the scenes: the vuetify vite plugin is registered manually by this module and injects the vuetify imports parsing the vue file in the vite plugins pipeline.

EDIT: you cannot register the vuetify vite plugin in your nuxt config file, this module will throw an error if it is found.

[AndreyYolkin]

Reproduction repo also has story, where I defined imports manually, but in that case I get Could not find defaults instance issue. I suppose it also happens because nuxt plugin runs too late

[userquin]

This module enables treeshaking feature via vuetify vite plugin (there is no way to use all components, you need to add them to vuetify.vuetifyOptions.components in the nuxt configuration or vuetify config file), the deprecated nuxt module by default not enabling that feature IIRC (maybe also a problem with nuxt vuetify sequential post plugin, i18n is installed and configured in the app).

It is about global components: check this entry https://vuetifyjs.com/en/features/treeshaking/

[userquin]

I suppose it also happens because nuxt plugin runs too late

No, it seems vuetify vite plugin missing from vite plugins.

[AndreyYolkin]

Ok, thank you for your answers, I'll move on with investigation in storybook ❤️

[userquin]

This plugin should add the imports (a copy/paste from the original): https://github.com/userquin/vuetify-nuxt-module/blob/main/src/vite/vuetify-import-plugin.ts#L25-L49

I'm going to check if being called when running nr storebook, and check what's running storebook, the dev server or the build.

First time I use storybook ;)

[AndreyYolkin]

Me too, honestly. Part of big Nuxt2/3 migration

Edit: They have viteFinal option for .storybook/main.ts: https://storybook.js.org/docs/configure, which returns full vite config

[userquin]

Using pnpm dev:

[userquin]

Running pnpm storybook (missing trace):

[userquin]

Anyway, there is no entry for Nuxt 3 in the docs, with nuxt modules you can do a lot of things, you have layers, you have module hooks (communication between modules), storybook cannot use only vite, Nuxt 3 is built on top of Nitro and Vite

[userquin]

It seems we need to patch or use another plugin, the plugin being called but storybook maybe adding some vite plugin to transform vue files.