Nuxt.js: Combine multiple nuxt apps

[MartinMuzatko]

What problem does this feature solve?

When working with distributed nuxt apps, that can be added in a plug-in manner, there has to be a mechanism to hook in to, and expose the routing, vue instance and other parts of nuxt. Both client and serverside.

Some safeguards to as much the nuxt app is able to extend the existing nuxt app, need to be set in place. E.g. only routing under special namespace is allowed for plugins. This has to be configurable

What does the proposed changes look like?

Two ready-made build nuxt apps should be able to be merged on the fly without involving a build process.
The host nuxt server has to expose the routes to be extended from within another module.
The guest (plugin) nuxt client needs to be able to be navigated to.

The problem is, that a simple proxy would not help with this problem, as one unified client-side routing would better aid the user experience of switching the apps or navigating the plugins.

A plugin has the same file structure like the host, except for that only the pages and components are exposed.

It would be great to be able to combine two already-built nuxt apps (SSR mode only).

_{This feature request is available on Nuxt community (#c9271)}

[pi0]

Hi @MartinMuzatko. Thanks for your idea. I don't think it would be ever practical with separate builds for the unified router. The client side of each will be instantiated with a specific router, config, plugins, store, webpack entrypoint, etc.

One improvement we can do for this area would be full reloading (or pjax style loading) pages when <router/nuxt-link> points to a non-existent route (of the current app) so the proxy approach will work.

[MartinMuzatko]

My current proof of concept is to copy the namespaced pages and components folder into the main app and then trigger the re-build. And if something fails to build, the app is removed again and re-built.

What I am aiming to build, is a main app with a plugin architecture, where integrators can add their own pages, maybe even extend existing menus. So far, we used iframes to show different apps, but this is really horrible.

Ideally the routing would already be enough, but from what I know. the main app entry point is used for routing and the vue instance. And there is a vendor file. All generated HTML pages define which code-splitted files it would need. So all I have to do, is to unify the router both client and serverside to allow a fully integrated user experience.

Maybe I can come up with a better idea.

[pi0]

What I am aiming to build, is a main app with a plugin architecture, where integrators can add their own pages

Yes, that could be actually possible to have a plugin architecture and nuxt modules that add pages, store modules, etc to an existing project. But that still needs a full rebuild (ie not possible at runtime)

[pi0]

@MartinMuzatko I'll propose an internal enhancement PR to make creating an official module possible.

[MuhaddiMu]

https://www.muhaddis.info/how-to-use-multiple-nuxt-js-applications-on-the-frontend/
I hope this will help you!

[MartinMuzatko]

https://www.muhaddis.info/how-to-use-multiple-nuxt-js-applications-on-the-frontend/
I hope this will help you!

No. Unfortunately this is not helpful at all. Running two nuxt apps on two different ports is not the solution to my problem.
As I explained, I need to be able to dynamically add to the app, in order to support other applications to..

• Embed other components from the main app (Alternative workaround: a npm package, but I don't want to duplicate loaded css and js, because every app would have to build the deps with a unique hash, default behavior of webpack config)
• Use the main apps routing to navigate to pages (Avoid iframes)
• Use the global state (vuex) or even vue-portal to change sidebar, header, depending on app etc.
• Use a shared API and state for common resources (don't have every module or page load its own resources)

So right now, my best bet is to run in dev mode with live refresh and have other modules install. Similar to just as how php pages would work. You just put files there and they are accessible through a static server. All fine.

Building is not a great option.. With varying customer hardware (some even run on raspberry with ARM architecture) building takes between 1 and 10 minutes.

Best would be to have a drop-in solution to merge built files together in an extensible way.
Or create nuxt apps as a plugin, which can hook into pages, but also use existing configuration and components.

[galvez]

Also check out https://github.com/nuxt/blueprints