Route meta Based Page Layout

Page layout

There are different ways to specify which layout should be rendered. Let’s start with layouts based on the meta property. These can be configured for each route defined for the vue-router. For this example, we’ll need the files listed below. All of them should be in the src directory.

• router/index.js
• layout/Layout.vue
• layout/components/StandardLayout.vue
• layout/components/AuthLayout.vue
• views/LayoutExample.vue

For demonstration, all routes will be handled by the LayoutExample.vue component. Usually, we’d have different paths and components that would render the same Layout.vue component inside. For instance, for /login and /register pages, the Layout component would render an auth layout, whilst /home would have a standard layout.

The index.js file

For this example, we’ll move to the router folder and make an index.js file here. We need three routes. The first default route will have no meta layout option specified, whilst the other two, /layout/standard and /layout/auth, will have layout: standard and layout: auth respectively, as shown below.