Solution: Configure Layouts for a Dashboard Site

Solution

Your task was to add routes for the dashboard and login pages and to modify the src/layout/Layout.vue component to provide a layout component based on the meta.layout value specified in the routes. Here are the changes required:

For the src/router/index.js file:

• Import Dashboard and Login components.
• Add routes for the imported components.
• The Dashboard route should include meta: { layout: ‘dashboard’ }.
• The Login route should include meta: { layout: ‘auth’ }.

For the src/layout/Layout.vue file:

• Create a LayoutComponentMap that maps layout components to dashboard and auth values that are provided through the meta route config.
• Create a computed prop called layout that returns a layout component from the LayoutComponentsMap by accessing the route meta layout information. The DashboardLayout component should be returned by default if there’s no layout meta information.

Let’s run the widget below to understand how the solution above works.

Note: The code below may take a while to run. When the server starts, go to the app URL, and see the output.