vue-layout-broker

Component provides the way to implement dynamic layout in a Vue app

Table of contents

• Installation
• Usage
• Interface
• Example

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

<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>

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.

Example

Working example

---

License

MIT