Version: 8.x (Current)

Plugin configuration

This section will explain the different kind of integration modes and how to make them work.

If you don't know where to place them, we suggest reading Core configuration first.

href plugin#

In order to work with micro-lc, an href plugin doesn't require any kind of adjustment.

This is the simplest plugin that micro-lc support: it allows you to redirect the user to another page, using the same window or a different one, using the sameWindow property.

Iframe plugin#

To work correctly iframe needs the X-Frame-Options header: this must be configured on the web server in which the front-end application is exposed.

caution

For security reasons, we suggest configuring X-Frame-Options with ALLOW-FROM instead of a wildcard.

This kind of plugin allows you to include a website without changing its implementation, but also has some limitations:

  • an iframe can't access the css variables provided by micro-lc;
  • an iframe doesn't support the properties injected by micro-lc;
  • inside an iframe isn't possible to control the micro-lc navigation flow.

If you own the website to integrate, we advise you to use a Qiankun plugin.

Qiankun plugin#

To integrate this kind of plugins we rely on the qiankun solution, that requires most attention on the developer side.

To integrate a qiankun plugin with micro-lc, you must adapt your web application following the steps described here: the right procedure depends on the framework used to build the website.

If you want to create a plugin from scratch using React, consider to use our template.

caution

Depending on where you expose your plugin, you should configure the Access-Control-Allow-Origin.

For security reasons, we discourage the use of a wildcard.

Plugin communication#

Each qiankun plugin is able to communicate with other qiankun plugins and to navigate to qiankun or iframe plugins just using the standard window.history.push functionality: the parameters between plugins can be shared using the window.location.search.

An implementation example is available on GitHub, as you can see:

let searchParams = new URLSearchParams(window.location.search);

is used to parse the received parameters, while:

window.history.pushState({}, `/${pluginRoute}`, `/${pluginRoute}?from=${from}`)

is used to navigate to another plugin while it is passing the from parameter.