vue-tidyroutes

0.1.2 • Public • Published

vue-tidyroutes plugin

VueJS routes definitions that can be created anywhere in your project.

Under the hood

It's just a singleton object that store all your routes for future export to the vue-router.

Install

npm install --save vue-tidyroutes

Example

app.js

import Vue from 'vue';
import VueRouter from 'vue-router';
import VueTidyRoutes from 'vue-tidyroutes';
 
import './component1'
 
Vue.use(VueRouter)
 
const router = new VueRouter({
    routes: VueTidyRoutes.export()
})
 
new Vue({
 
    router,
 
    el: '#app',
 
    template: `
    <div>
        <h1>Example</h1>
        <router-view></router-view>
    </div>
    `
})
 

component1.js

import VueTidyRoutes from 'vue-tidyroutes';
 
const Component1 = { template: '<div><h2>Component1</h2></div>' };
 
VueTidyRoutes.route('/component1', {
    name: 'component1',
    component: Component1
});
 
export default Component1;

Usage

VueTidyRoutes.route(path, options) VueTidyRoutes.route(path) VueTidyRoutes.route(path).child(path, options)

Create a route:

VueTidyRoutes.route(path, options)

const Foo = { template: '<div>foo</div>' }
const Bar = { template: '<div>bar</div>' }
 
let route1 = VueTidyRoutes.route('/foo', {
    component: Foo
})
 
let route2 = VueTidyRoutes.route('/bar', {
    component: Bar
})

Nested routes:

There are two ways to define nested routes

const Foo = { template: '<div>foo<router-view></router-view></div>' }
const Bar = { template: '<div>bar</div>' }
 
VueTidyRoutes.route('/foo', {
    component: Foo
})
 
VueTidyRoutes.route('/foo').child('/bar', {
    component: Bar
})
const Foo = { template: '<div>foo<router-view></router-view></div>' }
const Bar = { template: '<div>bar</div>' }
 
VueTidyRoutes.route('/foo', {
    component: Foo,
    children: {
        '/bar': {
            component: Bar
        }
    }
})

Detailed example at /example To run the example just: npm run example

Methods

Method Description Example
.route Defines a new route with the given options VueTidyRoutes.route('/home', {...options})
.children Defines a group of child for the current route VueTidyRoutes.route('/contact').children({ '/phone': ...options}, {'/location': ...options})
.child Defines a single child for the route VueTidyRoutes.route('/places).child('/centralpark', { ...options })
.export Returns all the defined routes in the entire project in the format that VueRouter expects const router = new VueRouter({routes: VueTidyRoutes.export()})

License

The MIT License (MIT). Please see License File for more information.

Package Sidebar

Install

npm i vue-tidyroutes

Weekly Downloads

0

Version

0.1.2

License

MIT

Last publish

Collaborators

  • javisperez
  • edgarnadal