Dynamic Layout with a pageLayoutService

In the previous example, we derived information from the route meta object to display the appropriate layout component. This time, we won’t rely on the layout/standard and layout/auth paths defined in the router.js file. Instead, we’ll have a reactive state in a service file. Because it’s directly related to the layout functionality, we won’t put it in the global services folder, but instead in the layout directory, so the file path will be src/layout/services/pageLayoutService.js.

Usable layout service

For a usable layout service, we need to be able to:

1. Reactively store the currently selected layout so that all ...