Component provides the way to implement dynamic layout in a Vue app
npm install --save vue-layout-broker
In routes config
// ... const routes = [ { name: 'some-route', path: '/some-route', component: SomePage, meta: { layout: 'FirstLayout' } }, { name: 'some-another-route', path: '/some-another-route', component: SomeAnotherPage, meta: { layout: 'SecondLayout' } }, // ...In your App.vue
<template> <div id="app"> <LayoutBroker :layouts="layouts" :current="$route.meta.layout" /> </div> </template> <script> import LayoutBroker from 'vue-layout-broker' import FirstLayout from '@/path/to/first/layout' import SecondLayout from '@/path/to/second/layout' const layouts = { FirstLayout, SecondLayout } export default { name: 'App', components: { LayoutBroker }, data () { return { layouts } } } </script>| Props | Required | Type | Default | Description |
|---|---|---|---|---|
| layouts | false | Object | {} | Layouts components list |
| current | false | String | null | Current layout component name |
| layoutClasses | false | [Object, Array] | ['layout'] | Layout classes to be bound in array or object notation |
| pageWrapperClasses | false | [Object, Array] | ['page-wrapper'] | List of classes to be bound to <router-view> in array or object notation |
Component provides two named slots before-page and after-page to inject content before or after <router-view>. Both slots have no any content by default.