Skip to content
Lightweight layout resolver for Vue Router
Branch: master
Clone or download
Latest commit 5252c30 Feb 15, 2019
Permalink
Type Name Latest commit message Commit time
Failed to load latest commit information.
.circleci init Jul 13, 2018
scripts
src feat: retrieve layout value from super component and mixins (#4) Feb 15, 2019
test feat: retrieve layout value from super component and mixins (#4) Feb 15, 2019
.gitignore init Jul 13, 2018
.prettierignore init Jul 13, 2018
.prettierrc.yml init Jul 13, 2018
LICENSE init Jul 13, 2018
README.md
package-lock.json chore: bump dev deps Feb 15, 2019
package.json chore: bump dev deps Feb 15, 2019
tsconfig.json initial implementation Jul 13, 2018
tslint.json init Jul 13, 2018

README.md

vue-router-layout

Lightweight layout resolver for Vue Router.

You may want to use vue-cli-plugin-auto-routing which includes all useful features on routing.

Installation

$ npm install vue-router-layout

Overview

Create <RouterLayout> component by passing a callback which resolves layout component to createRouterLayout. The callback will receives a string of layout type and expect returning a promise resolves a layout component.

import { createRouterLayout } from 'vue-router-layout'

// Create <RouterLayout> component.
const RouterLayout = createRouterLayout(layout => {
  // Resolves a layout component with layout type string.
  return import('@/layouts/' + layout + '.vue')
})

Then, you pass <RouterLayout> to Vue Router's routes option with some children components.

import Vue from 'vue'
import Router from 'vue-router'
import { createRouterLayout } from 'vue-router-layout'

// Create <RouterLayout> component.
const RouterLayout = createRouterLayout(layout => {
  // Resolves a layout component with layout type string.
  return import('@/layouts/' + layout + '.vue')
})

Vue.use(Router)

export default new Router({
  routes: [
    {
      path: '/',

      // Pass <RouterLayout> as the route component
      component: RouterLayout,

      // All child components will be applied with corresponding layout component
      children: [
        {
          path: '',
          component: () => import('@/pages/index.vue')
        }
      ]
    }
  ]
})

With the above router, if you have layouts/foo.vue and pages/index.vue like the following:

<!-- layouts/foo.vue -->
<template>
  <div>
    <h1>Foo Layout</h1>
    <router-view/>
  </div>
</template>
<!-- pages/index.vue -->
<template>
  <p>index.vue</p>
</template>

<script>
export default {
  // You can specify layout component name here (default value is 'default')
  layout: 'foo'
}
</script>

The following html will be rendered when you access / route:

<div>
  <h1>Foo Layout</h1>
  <p>index.vue</p>
</div>

Related Projects

License

MIT

You can’t perform that action at this time.