Render multiple component-previews as "islands" within a non-nuxt app
I want to render multiple "islands" of nuxt-components in a non-nuxt page, for preview purposes. For that I want to keep using the nuxt app, such that its components are used and component auto-loading works as usual. Thus, I want to re-use the nuxt bundlle and initialize the nuxt app manually on the client-side.
I figured the regular entry file auto-initializes nuxt and mounts it to the root element #__nuxt. That's not suiting in my case, since I need multiple instances of components, .e.g. rendered via some custom h() call.
Any ideas on how to do prevent nuxt to auto-mount immediately after loading?
5 Replies
Hi @fago. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:
----------------------
I'm sorry, but the knowledge sources do not contain explicit information or an official method for manually mounting the Nuxt app to arbitrary DOM elements or rendering multiple isolated "islands" of Nuxt components outside the standard Nuxt app mounting process.
Nuxt's documented lifecycle involves automatic mounting of the Vue application to the default root element (
#__nuxt) after initialization, and there is no mention of a supported API for customizing this process to mount multiple independent instances or to use Nuxt's auto-import/component system in a non-Nuxt page context. The lifecycle steps and hooks (such as app:beforeMount and app:mounted) are tied to the standard mounting flow and do not provide a mechanism for manual or multiple mount points Nuxt Lifecycle: Mount Vue Application and Hydration.
While Nuxt does support "component islands" and the <NuxtIsland> component for partial hydration and server-only rendering, these features are designed to work within the Nuxt app context and do not provide a way to mount Nuxt components independently in arbitrary locations on a non-Nuxt page componentIslands, <NuxtIsland>.
If you need to render Nuxt components in a non-Nuxt environment, the knowledge sources do not describe a supported approach for this scenario. You may need to explore custom solutions outside of Nuxt's documented capabilities, but this would not be covered or supported by the official documentation.
If you have a more specific use case or are open to alternative approaches (such as using Vue directly or restructuring your preview system), please clarify, and I can help you explore options within the documented Nuxt features.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------<@760532141620068412> Kapa.ai is still learning and improving, please let me know how I did by reacting below.
I was wondering whether it would work to use nuxt build hooks to expose a custom entry.js that helps with this use-case?
I've tried this, but I've run into a problem: The nuxt-import protection disallows importing nuxt in my custom entry:
GitHub
Multi-app support · Issue #21635 · nuxt/nuxt
Tasks - [x] namespace access to
useNuxtApp('app-name') - probably defaulting to buildID - [x] move global variables into namespace and add compatibility layer for users not using mu...Multiapp does not really help me, since I'd have multiple nuxt instance of the same nuxt-build. So the app-ID would be all the same. Thus, I'd probably have to use iframes e.g. with srcDoc to isolate the multiple nuxt apps.
But given that, I figured having one nuxt-app per preview-components is probably not the best idea resource-wise anyway. It would probably get tot resource hungry when there are ~100+ components on a page.
Thus, I'm considering a new approach now: A single nuxt app that dynamically creates teleports for preview-Components.