vue-layout-broker

0.0.3 • Public • Published

vue-layout-broker

npm npm vue2

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

<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

Readme

Keywords

Package Sidebar

Install

npm i vue-layout-broker

Weekly Downloads

8

Version

0.0.3

License

MIT

Unpacked Size

16.8 kB

Total Files

16

Last publish

Collaborators

  • saymon