XbBaseLayout #
Overview #
XbBaseLayout is a component used to construct the layout of a page.
The idea to construct the layout is by using vue slot
XbBaseLayout component has 3 types (base, main-side-navigation, base-side-navigation), where each type provides different vue slot template and different layout position. Hence, you must define the type using type props in order use this component.
Layout Types #
Base #
This layout type consist of three vue slot templates
- Topbar
- Main
- Bottombar
On the micro-frontend architecture, this layout usually placed in common service.
Here is the illustration of base layout with corresponding slot templates.
Main Side Navigation #
This layout type consist of four vue slot templates
- Topbar
- Left sidebar
- Main
- Bottombar
On the micro-frontend architecture, this layout usually placed in services of the webapp.
Here is the illustration of main-side-navigation layout with corresponding slot templates.
Base Side Navigation #
This layout type consist of four vue slot templates
- Topbar
- Left Sidebar
- Main
- Bottombar
The difference between this type and with "main-side-navigation" layout type is on the left-sidebar position that is placed at full height on the page.
On the micro-frontend architecture, this layout usually placed in services of the webapp.
Here is the illustration of base-side-navigation layout with corresponding slot templates.
Communication Between Slot Components #
The communication between slot components is established and implemented by using vue composable .
The composable provides 2 functions (dispatchLayoutEvent and listenLayoutEvent):
dispatchLayoutEventis used to dispatch the eventlistenLayoutEventis used to listen the dispatched event
As an example, if you want to implement communication between the topbar, main, and bottombar. You should write code to emit and listen events from each components.
You also should specify the parameter correctly in order to communicate between the corresponding components. There is no absolute convention about this, but you can follow the example below to write the parameter syntax.
Composable only can be used if the components are in the same service/same project repository.
When working with micro-frontend architecture, you cannot use the composable directly to implement communication between components in the different services (e.g topbar-sidebar, as mentioned above, the topbar is usually located in common service and sidebar is located in other each service).
To establish communication between components in different services, you should use pub-sub pattern from xbase-js library.
But, in the example below since all the slot components are placed in the same project repository, the communication is established by using the composable
Example Of Type 'Base' #
Example Of Type 'Main Side Navigation' #
Example Of Type 'Base Side Navigation' #
API #
Composable #
Here is the composable event emitter and listener code, you can use.
Reference #
Here is another resource that you can read about the requirement specification about XbBaseLayout component