Add nuxt3 + vite support

[tobiasdiez]

Types of changes

• Bug fix (a non-breaking change which fixes an issue)
• New feature (a non-breaking change which adds functionality)
• Breaking change (fix or feature that would cause existing functionality to change)

Description

This adds Nuxt3 and Vite support. The main idea is to use nuxt to render the stories and expose them at /_storybook. Thus, we completely skip the custom config of the webpack/vite storybook build process and ensure that all components behave the same as in the production build. This strategy is taken from https://github.com/storybookjs/storybook/blob/next/examples/standalone-preview.

Currently, I only have a working prototype that requires manual config locally. Follow these steps:

• Add @storybook/vue3 as dependency
• Add alias: { global: 'global.ts' } to nuxt.config and a global.ts in the root folder with the following content:

import { JSDOM } from 'jsdom'

const myGlobal = globalThis
const dom = new JSDOM()
myGlobal.window = dom.window as any as Window & typeof globalThis
myGlobal.document = dom.window.document
myGlobal.location = dom.window.location
// Needed for storybook
// @ts-ignore -- this is a workaround
myGlobal.PREVIEW_URL = '_storybook/external-iframe'
export default myGlobal
export const window = myGlobal

• Add "storybook": "start-storybook -p 6006 --preview-url=http://localhost:3000/_storybook/external-iframe --no-manager-cache", to package.json
• Add pages/_storybook/external-iframe.vue with the following content https://github.com/JabRef/JabRefOnline/blob/main/pages/_storybook/external-iframe.vue

Now you can start the developer sever nuxi dev and than the storybook server yarn storybook. Your stories should now appear at localhost:6006 (or whatever address yarn storybook prints).

Current blockers to make this a straightforward module that one can install:

• Polyfill in nuxt3 for globals: Polyfill cjs globals for vite nuxt/nuxt#12830
• Ability to add custom commands to nuxi, like nuxi storybook: https://github.com/nuxt/nuxt.js/issues/13634
• Ability to add a custom page and route from a module. There is addServerMiddleware but I couldn't figure how to easily render a vue component (using the nuxt pipeline) and return the generated html.
• Ability to forward a request from a h3 route to an existing server (maybe thats already possible, but I couldn't figure out how to do this).

@pi0 @danielroe I hope its okay to cc you here to get your input on these open points.

Checklist:

• My change requires a change to the documentation.
• I have updated the documentation accordingly.
• I have added tests to cover my changes (if not applicable, please state why)

[Rigo-m]

This is more of a hack than a full fledged module, shouldn't we upgrade the whole module to use nuxt kit? I'm gonna produce a PoC by tomorrow

[shcrzbt]

Add nuxt3 and vite support please

[dargmuesli]

@Rigo-m was there a blocker to your plan to produce a PoC? Can we help in any way?

[tobiasdiez]

If someone is looking for a reference, a working implementation can be found at https://github.com/JabRef/JabRefOnline. In its current version, it's quite hacky but I think with the right knowledge (and time) it could be developed into a proper nuxt module.

[Rigo-m]

@Rigo-m was there a blocker to your plan to produce a PoC? Can we help in any way?

The blocker was scarcity of time. I'll have my vacations in August, I'll give it a try then

[OlaAlsaker]

Any news on this?

[liamb13]

Any news on this?

I imagine there'll be some updates here: https://nuxtnation.com/workshops/create-a-jamstack-site-using-nuxt-3-storyblok

[OlaAlsaker]

Any news on this?

I imagine there'll be some updates here: https://nuxtnation.com/workshops/crash-course-into-the-jamstack-with-nuxt-and-storyblok

That is for Storyblok, not Storybook 😅

[liamb13]

Any news on this?

I imagine there'll be some updates here: https://nuxtnation.com/workshops/crash-course-into-the-jamstack-with-nuxt-and-storyblok

That is for Storyblok, not Storybook 😅

Oops.. disregard 🤦‍♂️ Although with NuxtNation starting tomorrow and Nuxt3 set to drop - I think (hope) we'll start seeing a ramp up. 🤞

[bmulholland]

Let's turn these unproductive, generic requests for updates into something productive:

What work is left? Is there something that others could take on?

[tobiasdiez]

@bmulholland Have a look at #330 (comment)

[bmulholland]

Thanks, Tobias! Summarizing: Current goal is to turn hacky approach (see this PR and https://github.com/JabRef/JabRefOnline) into something more solid. The main thing missing is the necessary knowledge to convert the hacks into best practices for a functional nuxt module. Some beginnings can be found at https://github.com/JabRef/JabRefOnline/blob/main/modules/storybook.ts

@tobiasdiez Are there hacks you have in mind to fix beyond the TODOs in that file? Just whatever is already on your mind about it.

On my end, I'll see what feedback and help I can get in Discord, starting with the linked TS file.

(I'm a startup founder and limited in my bandwidth to do deep work, but I can help shepherd it along.)

[tobiasdiez]

Thanks for the summary. Essentially, every of the manual steps currently outlined in this PR should be converted into code in the nuxt module; so that end users only have to install the module without doing anything else. See also the list of todo's/blockers at the end of this PR description.

[damevin]

Any updates on this please ? :)

[yassilah]

hi, I was trying to add storybook as well in my Nuxt 3 app, I came up with this solution, which is not ideal but does solve what I was trying to do for now. It doesn't need any config and allows for some customization (see https://github.com/yassilah/nuxt-storybook/blob/main/src/module.ts)

pnpm add -D @yassidev/nuxt-storybook

// nuxt.config.ts
export default defineNuxtConfig({
   modules: ['@yassidev/nuxt-storybook']
})

Create a story in the /components folder and it should work

[OlaAlsaker]

Wow @yassilah , well done! 👏 Have you managed to get the auto-import working as well?

[yassilah]

Yes, autoImports, aliases and everything that depends on Nuxt vite config should work as i'm merging it with storybook's. But 1) storybook keeps its own server instance (by default :3001) 2) no access to the Nuxt app instance (so useAppConfig() will work inside a component but it would be empty)

[OlaAlsaker]

Excellent! I will test it out right now. If it works we could make a PR and get your solution published 😄

[OlaAlsaker]

@yassilah You said "... which is not ideal". Would you mind specifying why?

[yassilah]

@OlaAlsaker well ideally i'd like what @tobiasdiez said:

completely skip the custom config of the webpack/vite storybook build process and ensure that all components behave the same as in the production build

So, no two concurrent servers with two different builds running, full HMR support (which right now seems to work a bit randomly) and so on. That's why for now i'm using my module because at least I get to define my stories but it's far from perfect IMO 😅

[appinteractive]

Hey does anything change now as storybook 7 supports vite natively? https://storybook.js.org/blog/first-class-vite-support-in-storybook/

nuxt/nuxt#418

[tobiasdiez]

A few things changed with v7 but not too much, see JabRef/JabRefOnline#1726 where I upgrade storybook to v7 in my project. Note that this still uses nuxt to render the stories, and storybook-vite is only used for their static analysis of stories storystorev7.

[scscgit]

@yassilah @yassidev/nuxt-storybook

Your module doesn't seem to work, could you please address the issue yassilah/nuxt-storybook#2? Has anyone here had success running it?

[pi0]

Regarding CLI support, it is not a blocker. Consider exporting a binary nuxt-storybook it will be future compatible. (Also highly recommend using https://github.com/unjs/citty to make nuxi cli compatible)

[kirillsakun]

I've found this addon and it works for me.
It supports auto imports and you can use NuxtLink.

Hope it will help you😌

[productdevbook]

Check zero config nuxt 3 support storybook https://github.com/storybook-vue/nuxt

[tobiasdiez]

Although I still think it's a more stable solution to let nuxt render the stories, nuxt 3 is now officially supported so I'll close this "PR".