-
-
Notifications
You must be signed in to change notification settings - Fork 91
New issue
Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.
By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.
Already on GitHub? Sign in to your account
Add nuxt3 + vite support #385
Conversation
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 |
Add nuxt3 and vite support please |
@Rigo-m was there a blocker to your plan to produce a PoC? Can we help in any way? |
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. |
The blocker was scarcity of time. I'll have my vacations in August, I'll give it a try then |
Any news on this? |
I imagine there'll be some updates here: https://nuxtnation.com/workshops/create-a-jamstack-site-using-nuxt-3-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. 🤞 |
Let's turn these unproductive, generic requests for updates into something productive: What work is left? Is there something that others could take on? |
@bmulholland Have a look at #330 (comment) |
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.) |
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. |
Any updates on this please ? :) |
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 |
Wow @yassilah , well done! 👏 Have you managed to get the auto-import working as well? |
Yes, |
Excellent! I will test it out right now. If it works we could make a PR and get your solution published 😄 |
@yassilah You said "... which is not ideal". Would you mind specifying why? |
@OlaAlsaker well ideally i'd like what @tobiasdiez said:
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 😅 |
Hey does anything change now as storybook 7 supports vite natively? https://storybook.js.org/blog/first-class-vite-support-in-storybook/ |
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. |
Your module doesn't seem to work, could you please address the issue yassilah/nuxt-storybook#2? Has anyone here had success running it? |
Regarding CLI support, it is not a blocker. Consider exporting a binary |
I've found this addon and it works for me. Hope it will help you😌 |
Check zero config nuxt 3 support storybook https://github.com/storybook-vue/nuxt |
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". |
Types of changes
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:
@storybook/vue3
as dependencyalias: { global: 'global.ts' }
tonuxt.config
and aglobal.ts
in the root folder with the following content:"storybook": "start-storybook -p 6006 --preview-url=http://localhost:3000/_storybook/external-iframe --no-manager-cache",
topackage.json
pages/_storybook/external-iframe.vue
with the following content https://github.com/JabRef/JabRefOnline/blob/main/pages/_storybook/external-iframe.vueNow you can start the developer sever
nuxi dev
and than the storybook serveryarn storybook
. Your stories should now appear atlocalhost:6006
(or whatever address yarn storybook prints).Current blockers to make this a straightforward module that one can install:
nuxi storybook
: https://github.com/nuxt/nuxt.js/issues/13634addServerMiddleware
but I couldn't figure how to easily render a vue component (using the nuxt pipeline) and return the generated html.@pi0 @danielroe I hope its okay to cc you here to get your input on these open points.
Checklist: