Nuxt 3 support

[matheins]

Is your feature request related to a problem? Please describe.

Storybook Module isn't running when installing it as described in the docs.

Running npx nuxt storybook leads to:

Invalid command storybook
Usage: npx nuxi dev|build|generate|prepare|usage|info|init|create [args]

Describe the solution you'd like

Module should run as we know it from Nuxt 2

[PeteJStewart]

Is there any news or thoughts on this? I'd really love to use Storybook with Nuxt 3!

[kissu]

Did you tried it with the Nuxt3 setup or the Bridge one?

Do you mind submitting your findings here? https://isnuxt3ready.owln.ai/
This way, the community will have a faster and simpler way of spotting the actual status of some packages.

[matheins]

Did you tried it with the Nuxt3 setup or the Bridge one?

Do you mind submitting your findings here? https://isnuxt3ready.owln.ai/

This way, the community will have a faster and simpler way of spotting the actual status of some packages.

Tried it with Nuxt3 Setup

[Mikephii]

If anyone is running into this issue you can just use the vue3 storybook initializer. run npx sb init and then manually select vue3 as project type.

I got the storybook up and running with the default stories in my nuxt3 project created using the nuxt3 setup linked above.

unsure if theres any issues with doing this but atleast its running for me

[Rigo-m]

If anyone is running into this issue you can just use the vue3 storybook initializer. run npx sb init and then manually select vue3 as project type.

I got the storybook up and running with the default stories in my nuxt3 project created using the nuxt3 setup linked above.

unsure if theres any issues with doing this but atleast its running for me

Main issues is that it doesn't load up nuxt modules. So, e.g. you install formkit module, you don't have formkit components auto-loaded. Also, vite config is different, therefore you need to manually pair up storybook-builder-vite configuration with nuxt vite config.

[Rigo-m]

@farnabaz @pi0 mind if I put my head into the migration to nuxt kit + vite support?

[tobiasdiez]

@Rigo-m did you already found the time to work on this?

[Rigo-m]

@Rigo-m did you already found the time to work on this?

I've started to look into it. I'll wrap my head around it this weekend

[Foddy]

Has anyone managed to set it up manually with Nuxt 3?

[Foddy]

Has anyone managed to set it up manually with Nuxt 3?

https://www.youtube.com/watch?v=IihqmCcqMaHo&ab_channel=productdevbook

@Foddy

This link is not working (private video?) 😖

[productdevbook]

Has anyone managed to set it up manually with Nuxt 3?

@Foddy https://www.youtube.com/watch?v=IihqmCcqMHo

[Rigo-m]

Has anyone managed to set it up manually with Nuxt 3?

@Foddy https://www.youtube.com/watch?v=IihqmCcqMHo

I've managed to set it up with the help of this video, although it feels really clunky. Because setting it up like this means that every plugin/module you add to nuxt has to be replicated in storybook configuration.

[louismorgner]

Excited to see a solution that properly works with the nuxt3 rc 🥳

[tobiasdiez]

@Rigo-m did you already found the time to work on this?

I've started to look into it. I'll wrap my head around it this weekend

As storybook is the last feature missing for my migration to nuxt3, I would be interested in working on this as well. If you are interested, we can collaborate on this.

[tobiasdiez]

The instructions outlined at https://github.com/nuxt-community/storybook/pull/385 worked for me. Feedback welcome!

[edge-rps]

specify that the app is using Vue3 then it will work with Nuxt3, tested on codesandbox and can confirm it works. ✔ npx sb init --type vue3

[cdowning]

Any update on this? I would really love to use Storybook in Nuxt 3.

[Rigo-m]

Hi y'all. Hope you are having a great summer. I'll have time to work on this next week since I'll be on vacation from my main job. While discussing with @danielroe this issue on histoire I've been told that there are some movements towards being able to mount components that makes use of the nuxt context (namely [this pr](https://github.com/nuxt/framework/pull/5723, but maybe other PRs in the near future). I think we can start approaching the migration to nuxt3 once this is completed.

@tobiasdiez If it's okay for you, I'll hit you up on monday to coordinate on this subject

[kadumedim]

For anyone finding this thread, as of now :

• You can run a standalone Vite to run @storybook/vue3 (nuxtjs/storybook module doesn't work on nuxt3) But it wont work with nuxt 3 modules/components (NuxtLink for example)...

• There is some 'workaround' (pretty sketch tbh and looks like most of the times it doesn't work as it should) stated here

Waiting for updates on this module!

[riz007]

Any idea when a stable Nuxt 3 + Storybook version will be released? Waiting for this

[dargmuesli]

I'd recommend to check on the issues @Rigo-m kindly linked. Those are being waited for before work on this storybook module for Nuxt 3 compatibility continues.

[weo3dev]

@Rigo-m - I think I can speak for all of us by saying 'thank you' for your hard work, time and energy towards this specific ask from the community. Just to clarify: is it both the historie issue and the nuxt/framework ticket that are blockers for moving forward? Are these the kind of things where more helping hands would be appreciated or is it more a matter of time and energy? If there are some of us (I'm raising my hand here) who could offer valid help, I'd love to do so.

[tobiasdiez]

@Rigo-m, @kadumedim @weo3dev and anyone else willing to work on this.

Following the approach outlined at #385, I've a working prototype with nuxt3 support at https://github.com/JabRef/JabRefOnline. It is generally working and has CI in place verifying the storybook (using Chromatic). I agree that currently it as quite hacky, but I feel this mostly comes from me lacking the necessary knowledge to convert it to a functional nuxt module. So if you want to help, I would propose we use this prototype as a working platform and migrate the "hacks" to a proper module there. Some beginnings can be found at https://github.com/JabRef/JabRefOnline/blob/main/modules/storybook.ts. Once this is completed, we can then easily push these changes to the PR #385. What do you think?

[Didza]

The frustration of having more things breaking with the Vue 3 ecosystem is a mess. At this moment storybook is just not working with Nuxt Auto imports.

[50l3r]

I try to follow this steps: https://github.com/nuxt-community/storybook/pull/385

But i recieve this error at starting nuxt:

[Vue Router warn]: uncaught error during route navigation:
TypeError: Cannot set properties of undefined (setting 'STORYBOOK_REACT_CLASSES')
    at Object.<anonymous> (X:\git\xxx\xxx-frontend\node_modules\@storybook\vue3\dist\cjs\client\preview\globals.js:8:38)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)
    at Module.load (node:internal/modules/cjs/loader:981:32)
    at Function.Module._load (node:internal/modules/cjs/loader:822:12)
    at Module.require (node:internal/modules/cjs/loader:1005:19)
    at require (node:internal/modules/cjs/helpers:102:18)
    at Object.<anonymous> (X:\git\xxx\x-xxfrontend\node_modules\@storybook\vue3\dist\cjs\client\preview\index.js:18:1)
    at Module._compile (node:internal/modules/cjs/loader:1105:14)
    at Object.Module._extensions..js (node:internal/modules/cjs/loader:1159:10)

Does anyone have an idea that it may be happening?

I think the error occurs in the configure method at pages/_storybook/external-iframe.vue

storybook: 6.5.13 nuxt: 3.0.0-rc.13 @nuxtjs/storybook: 4.3.2

I use vite instead webpack

[tobiasdiez]

Sorry, I forgot to update the PR. The following code of the ifame works for me: https://github.com/JabRef/JabRefOnline/blob/main/pages/_storybook/external-iframe.vue

[50l3r]

Sorry, I forgot to update the PR. The following code of the ifame works for me: https://github.com/JabRef/JabRefOnline/blob/main/pages/_storybook/external-iframe.vue

I update external-iframe.vue but i give me this error:

This file is being treated as an ES module because it has a '.js' file extension and 'X:\git\xxx\xxx-frontend\node_modules\mount-vue-component\package.json' contains "type": "module". To treat it as a CommonJS script, rename it to use the '.cjs' file extension.

[tobiasdiez]

It's hard to say what's wrong without seeing the actual import that triggers this error. Usually, you want to put the problematic package into transpile.

You should also remove the @nuxtjs/storybook module.

[IceBjerg]

What is the current situation of this? I just started to use nuxt3, I really like the way it works for the modules that have nuxt3 support.

Can someone provide a minimal setup with nuxt3, or should I just make peace with the fact that it's probably too complicated for me to do at the moment?

[tobiasdiez]

It is possible to run Storybook with Nuxt 3, but it's a bit hacky and needs manual setup and is definitely not as easy as "add the following module to your nuxt config". There are currently a few features that are missing from Nuxt to automate the setup, see the list at the end of the description of #385.

My proposal for moving this forward is at https://github.com/nuxt-community/storybook/issues/330#issuecomment-1230254388. Help is very much appreciated.