Provide method to render component island

[tobiasdiez]

Describe the feature

I would like to have a method render(island component, props) that renders a given (island) component and returns the rendered html.

I guess this can be archived by fetching __nuxt_island/<component> myself, but then I have to take care of properly serializing the props etc.

---

Background: I'm currently working on a nuxt module for storybook, and the idea there would be to let nuxt render the stories and then embed them then in the storybook. Storybook starts its own vite server and you can hook into it by providing an own render method. My hope was to create a nuxt instance there nuxt = loadNuxt(...) and then call something like nuxt.render(StorybookIslandComponent, props: story), where the StorybookIslandComponent would be an component provided by the nuxt module and story is the story to be rendered.

Additional information

• Would you be willing to help implement this feature?
• Could this feature be implemented as a module?

Final checks

• Read the contribution guide.
• Check existing discussions and issues.

[Laruxo]

My company is on the last leg of migrating to Nuxt 3. We are only missing a way to mock the useNuxtApp and other Nuxt internals for Storybook.

I see there are many issues (#15265, nuxt-modules/storybook#385, storybookjs/storybook#20312, storybookjs/storybook#21196) around this topic. But your solution @tobiasdiez seems to be the most promising. Is there any way I (or the community) could help creating this framework for storybook?

[danielroe]

This PR may resolve this issue: nuxt/framework#5723.

[shilman]

@tobiasdiez This looks like a promising start https://github.com/hirotaka/storybook-addon-nuxt

[tobiasdiez]

@shilman Thanks for the pointer. However, this addon tries to follow a completely different approach: Instead of letting Nuxt render the stories, it replicates the nuxt pipeline by copying over the nuxt vite config to storybook. This is similar to how the existing Nuxt 2 module works. Looking at some of the issues in this repo, it feels this approach quickly turns into a cat and mouse problem, where one has to add more and more workarounds for different (edge) cases when nuxt modules etc provide new components or change the vite config. I feel like letting nuxt render the stories will eventually result in a more stable solution.

Do you have some experience with how other meta frameworks integrations are handling this? E.g. what is rendered where in the storybook-next integration?

[danielroe]

We currently have an experimental feature from Nuxt test utils: fetchComponent which will render arbitrary components in your project. This might be more what you are looking for @tobiasdiez?

See nuxt/framework#5723.

My own view is that the best approach would be to try and expose enough stable config and 'run' the Nuxt entry point so plugins, etc, are set up. This is the approach we've taken in nuxt-vitest.

Feel free to DM me to discuss if you would like.

[shilman]

@tobiasdiez @danielroe Sorry for the late reply on this. Indeed, our current NextJS integration is a cat-and-mouse game and we are looking to replace it with something more robust. I like the look of fetchComponent!!!

[danielroe]

Great! Let me know if there's anything I can do. Feedback on the feature is very welcome 🙏