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.

[JavaChr1s]

I was able to get Storybook running on Nuxt3 using the documentation from @tobiasdiez with some additional configurations.

Unfortunately this solution doesn't allow us to use the VueDev-Tools within storybook since the external-iframe component doesn't show any child-components. The reason for that is that this component is using mount-vue-component internally which adds the stories component/vnode not to the component-treestructure.

[tobiasdiez]

Nice @JavaChr1s! Would you mind sharing the additional config that was necessary to make it run?

Once Nuxt 3.1 is out, we could play around with the upcoming server-rendered island components. That maybe fixes the problem with the vuedev tools.

[OlaAlsaker]

@tobiasdiez Was thinking about the same thing when I saw the island components!

[OlaAlsaker]

I guess a good start would be to upgrade the module to use Nuxt kit, like mentioned here: https://github.com/nuxt-community/storybook/pull/385#issuecomment-1120170706

The workaround in #385 feels a bit hacky, so maybe we could try to just upgrade the components of the current package and see what happens 😄 @tobiasdiez did you try this? Or why did you go for the "standalone preview"-way?

Unfortunately I don't have a lot of experience with creating Nuxt-modules, but I could give it a try.

[bmulholland]

Nuxt Kit does seem like the way to go; I think it's the easy way to get support for both Nuxt 2 and 3. It's what I've seen other modules do, especially by the Nuxt team itself. There's some docs on these, but they're hard to find, so just noting here: https://nuxt.com/docs/guide/going-further/modules and https://nuxt.com/docs/guide/going-further/kit. If there are questions you can't find the answers to in the docs, I can see if I can get them filed to be added in the right place, just let me know.

[tobiasdiez]

There are essentially two approaches to storybook support:

• Current approach of the module: extract webpack config from nuxt and apply it to storybook
• The approach of #385: render the stories directly within the nuxt pipeline

In my opinion, the current approach gets quite complicated if you want to support both vite and webpack (especially since storybook is currently in a kind of in-between-state of migrating from webpack to vite). That's why I choose to embed the stories directly in nuxt.

Otherwise, I agree, nuxt kit is the way to go. However, this is more about how to implement one of the above solution and not a criterion on which solution to choose.

[JavaChr1s]

Nice @JavaChr1s! Would you mind sharing the additional config that was necessary to make it run?

Once Nuxt 3.1 is out, we could play around with the upcoming server-rendered island components. That maybe fixes the problem with the vuedev tools.

@tobiasdiez I have added the following config to get the workaround running:

In nuxt.config.js:

export default defineNuxtConfig({
  alias: { global: "global.ts" },

  ssr: false,

  vite: {
    resolve: {
      alias: {
        vue: "vue/dist/vue.esm-bundler",
      },
    },
  },

  build: {
    transpile: ["mount-vue-component"],
  },
});

In .storybook/main.js I have exported an empty object for now:

module.exports = {};

And I have removed some lines from global.ts to which are not needed without ssr:

const myGlobal = globalThis;
myGlobal.PREVIEW_URL = "_storybook/external-iframe";
export default myGlobal;
export const window = myGlobal;

As last I had to do a change in external-iframe.vue to make it work, even if this feels incorrect. Honestly I am not quite sure why I have to di it this way... So I changed the mount-line:

mount(element.render().type, {
    element: domElement,
    app: useNuxtApp().vueApp,
  });

[claudioccm]

I found this link on reddit, that might help people. It leads to this repo with a working boilerplate. I didn't have enough time thoroughly test it, but seems to work

[OlaAlsaker]

I found this link on reddit, that might help people. It leads to this repo with a working boilerplate. I didn't have enough time thoroughly test it, but seems to work

Yes, this is kind of working, but it is using Storybook's Vue package (not the Nuxt-module), which is lacking some functionality when integrated with Nuxt.

[elauser]

Has anyone figured out how to make it so that using useState in your components used by stories does not break your story? I get the following error.

As the people previously stated I got it working with vue3 through using the vite-builder, but not with nuxt auto imports (I have to explicitly import everything) and useState breaks the story

Cannot read properties of undefined (reading 'payload')
TypeError: Cannot read properties of undefined (reading 'payload')
    at useState (http://localhost:6006/node_modules/.vite-storybook/deps/nuxt_app.js?v=b855fbf5:1038:28)
    at setup (http://localhost:6006/components/ProductFilter/ProductFilterFacets.vue?t=1671456898765:13:18)
    at callWithErrorHandling (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-H6BPEN5U.js?v=b855fbf5:1736:18)
    at setupStatefulComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-H6BPEN5U.js?v=b855fbf5:7153:25)
    at setupComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-H6BPEN5U.js?v=b855fbf5:7116:36)
    at mountComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-H6BPEN5U.js?v=b855fbf5:5901:7)
    at processComponent (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-H6BPEN5U.js?v=b855fbf5:5879:9)
    at patch (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-H6BPEN5U.js?v=b855fbf5:5597:11)
    at ReactiveEffect.componentUpdateFn [as fn] (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-H6BPEN5U.js?v=b855fbf5:5992:11)
    at ReactiveEffect.run (http://localhost:6006/node_modules/.vite-storybook/deps/chunk-H6BPEN5U.js?v=b855fbf5:746:19)

[OlaAlsaker]

The current module uses Vue.extend to render the stories: https://github.com/nuxt-community/storybook/blob/e2fc1a2fc3ba868f173a9eff1b99d634a703ef85/storybook/nuxt-entry.js#L64-L84

This works because the components are imported in preview.js and added to the Vue-instance with Vue.component: https://github.com/nuxt-community/storybook/blob/e2fc1a2fc3ba868f173a9eff1b99d634a703ef85/storybook/preview.js#L5-L6

But, as far as I know, it is not possible to import the components this way in Nuxt 3 because of the auto-import.

So I guess the first question would: how do we correctly import the components (and other Nuxt-features) and make them available in the preview?

If we somehow got the auto-import functionality working in the preview, I think we would be really close.

@pi0 @danielroe Do you have any thought about how this can be approached? I can happily spend some time on this issue, but I will probably need to be pointed in the right direction 😄

[NicklasDegnebolig]

Quite curious what´s the status of this one. has anyone gotten a working setup going?

[skattabrain]

Quite curious what´s the status of this one. has anyone gotten a working setup going?

Kind of a bummer, I love Storybook for creating components outside of the app, for me it's a superior way to work.

I'm not sure I agree with auto imports being a good idea to begin with, but it's a horrible trade-off in regards to SB. I wonder if future me is going to come back to projects wasting time wondering where things are coming from. Global mixins were gross.

I like explicit imports for their clarity. I'm always thinking about revisiting a project in 2 years when a client asks for improvements.

[tobiasdiez]

The current state is still https://github.com/nuxt-community/storybook/issues/330#issuecomment-1230254388, at least from my perspective. Summary: there is a hacky solution that uses the nuxt pipeline to render the stories. It works but requires a lot of manual setup. Help is needed to integrate the hacks into a workable module that people can just install.

[fkromer]

The current state is still #330 (comment), at least from my perspective. Summary: there is a hacky solution that uses the nuxt pipeline to render the stories. It works but requires a lot of manual setup. Help is needed to integrate the hacks into a workable module that people can just install.

@tobiasdiez Are those manual steps documented somewhere? Probably adding those steps to the docs would be some intermediate solution.

[tobiasdiez]

Yes, it is more or less outlined at https://github.com/nuxt-community/storybook/pull/385. I'm also currently experimenting with Storybook v7 and rendering the stories using the new experimental component islands (https://github.com/JabRef/JabRefOnline/pull/1726 and https://github.com/JabRef/JabRefOnline/pull/1728). This simplifies the setup quite a bit, so hopefully it's a step towards a proper reusable nuxt module.

[bmulholland]

FYI, @danielroe is working on an approach over at https://github.com/danielroe/nuxt-vitest, and that may be another approach to the ones discussed above.

[OlaAlsaker]

FYI, @danielroe is working on an approach over at https://github.com/danielroe/nuxt-vitest, and that may be another approach to the ones discussed above.

@bmulholland , could you be more specific? What approach is he working on, and which files would be interesting to look at?

[bmulholland]

Sorry, I don't know. He just mentioned it to me in this context. I spoke with him via the Nuxt Discord. Maybe you could DM him there to ask?

[fkromer]

Probably the video How to setup Storybook + Nuxt 3 + Tailwind CSS + Vite ? could be helpful for you guys as well.