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

    Install

    npm i vue-layout-broker

    DownloadsWeekly Downloads

    84

    Version

    0.0.3

    License

    MIT

    Unpacked Size

    16.8 kB

    Total Files

    16

    Last publish

    Collaborators

    • saymon