Skip to content

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

License

Notifications You must be signed in to change notification settings

devstark-com/vue-layout-broker

Repository files navigation

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

About

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

Resources

License

Stars

Watchers

Forks

Packages

No packages published