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.

[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

[ilp]

Does someone have news about this?

[yoyo837]

Need this, multiple application instances are load balanced through Nginx, and each instance has the same chunks file name for all builds.

[mikeslattery]

Nuxt 3 has extends to support this. See extends status

There is an npm module for Nuxt 2, nuxt-extend

[yoyo837]

Nuxt 3 has extends to support this. See extends status

There is an npm module for Nuxt 2, nuxt-extend

It's not working as I expected:

[FeldrinH]

Nuxt 3 has extends to support this. See extends status

There is an npm module for Nuxt 2, nuxt-extend

How exactly would extends solve this issue? Extends documentation seems to be fairly bare bones so maybe I'm missing something, but as far as I understand, this issue is about extending a pre-built nuxt application with other pre-built nuxt applications, whereas extends that are currently being implemented are a build time feature that can't be used to combine pre-built applications.

[madebyfabian]

@FeldrinH Just checking in, the last comment on this was half a year ago. Nuxt extends is now well documented and serves exactly this purpose. So I guess we could close this then?

[manniL]

@madebyfabian Indeed. I'd close in favor of Nuxt extends/layers

[FeldrinH]

I took a look at the new extends/layers docs. Perhaps I am missing something, but I still do not see how layers/extends fulfills this request.

As I unerstand it, this issue is about building multiple Nuxt apps separately, and then combining them after each of them has been built. If I understamd the documentation correctly extends/layers are designed to work at build time, so you have to build all your apps together.

I might be wrong about this, in which case I would appreciate an example or a more specific link to documentation showing how extends can function after building the apps separately.

[madebyfabian]

@FeldrinH

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.

So you still don't have 2 fully equal apps, you would have a main one. And this will be always the case, since you need some kind of configuration on which nuxt app hosts which one or which routes to what. Without any, this will be something you have to figure out on your sever, but nut nuxt.

With todays layers, you can do create a empty nuxt project for the Main Website, which only has like 20 lines of code:

export default defineNuxtConfig({
  extends: [
    'my-awesome-website-1',
    'my-awesome-website-2',
  ],

  // some minimal config
})

[FeldrinH]

With todays layers, you can do create a empty nuxt project for the Main Website, which only has like 20 lines of code:

export default defineNuxtConfig({
  extends: [
    'my-awesome-website-1',
    'my-awesome-website-2',
  ],

  // some minimal config
})

This fulfills part of the request, but my question is, can I now build my-awesome-website-1 and my-awesome-website-2 separately and then afterwards load them into the main website without having to build all the apps together in one giant build step? The documentation seems to suggest that for extends to work the extended sites have to be present as source code, not a prebuilt app.

[madebyfabian]

Okay interesting. Could you elaborate what the benefits of this could be? Nuxt 3 builds fast and efficient, I guess you could build 10 sites in once and it would only take a few minutes in maximum.

[FeldrinH]

#5816 (comment) makes some points for why this would be useful.

For me personally it is for making a plugin system, where the main app can load some subset of the existing sub-apps, which is determined at deploy time.
Rebuilding everything is undesireable for two reasons:

a) It pushes all build issues to the deployer, who in my case is the user, and they probably won't know what to do with a build error if it ever happens. (In my case sub-apps are developed by third-party developers so expecting them to just be careful about this sort of thing is probably overly naive)

b) It is slow. Maybe not on an absolute scale, but when developing a tiny plugin for an app with hundreds of components and pages, the difference can become quite noticeable.

[FeldrinH]

Now that I've written it out like this, I will have to admit that the use case is to probably fairly niche.

[madebyfabian]

@FeldrinH Okay I can understand some points in some ways. But yes as you said, it is very niche and from a technical part I guess it would be too complicated to provide this as a general option of building nuxt apps. So I would suggest to keep this closed since nuxt layers covers a large part of the request.

[cxl-todd]

I’ve found that if you have two separate apps that inherit from a “base app”, it cannot merge both into a new app using the approach described.

Illustrated:

     BASE
    /    \
APP1      APP2
   \     /
    MERGED

I see the following error in the console:

 WARN  Cannot extend config from @foo/app1 in /Users/me/foo/app1
 WARN  Cannot extend config from @foo/app2 in /Users/me/foo/app2

Thoughts?