How to embed Nuxt.js into React App (with Routing)

[Tobjoern]

Hello, I'm new to the luigi Framework, but I already read some of the documentation.

Here is my problem statement:
I have a pretty large Nuxt.js app, which features multiple pages. I wish to embed this app into another (large) React.js application (which also uses routing).
Ideally the integration should work like this:

• Have a special route, in the React.js app, like: app/other-app
• Once the Route app/other-app is loaded, the Nuxt.js app is embeded into the React.js app, this means, the React app's navbar etc. stays in place, but the Nuxt.js app is just added into the main view (see illustration). The Nuxt app is also able to route to different locations, like app/other-app/page1 etc.
  

From my understanding this is possible by integrating the LuigiClient into the Nuxt.js app and using the Iframe approach.
I'd appreciate if you could point me into the right direction regarding the implementation, thank you!

[ndricimrr]

Hi @Tobjoern ,

Embedding a Nuxt.js app or any other type of app as an iframe based microfrontend can be achieved in a couple of steps. Here are some tips to get you started:

First you need to embed Luigi Core on the React App which you use to host your main application.
You can use our CRA-Luigi-Template to easily create a React based Luigi App, and have a look at the index.html and the luigi-config.js file for how that is done.

Once you have Luigi Core running on your main React App, you just need to add your Nuxt.js app in the node configuration on the luigi-config.js file as a new node.

As you want your new Nuxt.js node to have its own routing, we provide a feature to make that possible. For this you can set the property virtualTree to true on the node you just added. This allows the microfrontend url to change independently of the main App. So you will not see any changes in the main URL of your app.
However, as you might want to keep the microfrontend route and the main React App route in sync with each other, here the LuigiClient withoutSync navigation feature comes in handy, as it allows updating the main route without affecting the active microfrontend. In order to use LuigiClient API functions you just need to import it into your Nuxt.js microfrontend and use the linkManager features directly.

Let us know if you have any further questions.

[Tobjoern]

Thanks, that helped a lot!