vue-layout-broker
Component provides the way to implement dynamic layout in a Vue app
Table of contents
Installation
npm install --save vue-layout-broker
Usage
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
Interface
Props
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 |
Slots
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.