storybook Add nuxt3 + vite support

Types of changes

[ ] Bug fix (a non-breaking change which fixes an issue)
[x] 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

<template>
  <div>
    <div id="root"></div>
    <div id="docs-root"></div>
    <div class="sb-errordisplay sb-wrapper">
      <div
        id="error-message"
        class="sb-heading"
      ></div>
      <pre class="sb-errordisplay_code"><code id="error-stack"></code></pre>
    </div>
  </div>
</template>
<script lang="ts">
// Based on https://github.com/storybookjs/storybook/tree/next/examples/standalone-preview
// The idea is that we use nuxt to render the stories

import { configure } from '@storybook/vue3'

// --- Import your stories here ---
import * as Comp1 from '~/components/t-input.stories'

definePageMeta({ layout: false })

configure(() => [Comp1], module)
</script>

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: https://github.com/nuxt/framework/issues/1922
Ability to add custom commands to nuxi, like nuxi storybook: https://github.com/nuxt/framework/issues/4060
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:

[x] 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)

Apr 27 '22 11:04 tobiasdiez

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

May 07 '22 09:05 Rigo-m

Add nuxt3 and vite support please

Jun 15 '22 10:06 shcrzbt

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

Jul 12 '22 10:07 dargmuesli

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.

Jul 12 '22 20:07 tobiasdiez

@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

Jul 13 '22 08:07 Rigo-m

Any news on this?

Nov 16 '22 08:11 OlaAlsaker

Any news on this?

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

Nov 16 '22 08:11 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 😅

Nov 16 '22 08:11 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 😅

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

Nov 16 '22 09:11 liamb13

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

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

Dec 08 '22 11:12 bmulholland

@bmulholland Have a look at https://github.com/nuxt-community/storybook/issues/330#issuecomment-1230254388

Dec 08 '22 11:12 tobiasdiez

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.)

Dec 08 '22 12:12 bmulholland

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.

Dec 08 '22 12:12 tobiasdiez

Any updates on this please ? :)

Jan 10 '23 11:01 damevin

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

Feb 11 '23 21:02 yassilah

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

Feb 11 '23 21:02 OlaAlsaker

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)

Feb 11 '23 22:02 yassilah

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

Feb 11 '23 22:02 OlaAlsaker

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

Feb 11 '23 22:02 OlaAlsaker

@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 😅

Feb 11 '23 23:02 yassilah

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

Apr 05 '23 11:04 appinteractive

A few things changed with v7 but not too much, see https://github.com/JabRef/JabRefOnline/pull/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.

Apr 05 '23 12:04 tobiasdiez

@yassilah @yassidev/nuxt-storybook

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

Apr 06 '23 11:04 scscgit

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)