Skip to content
Elegant route definitions for Vue Router. Based on Laravel routing system. (v3 coming soon!)
Branch: master
Clone or download

Latest commit


Type Name Latest commit message Commit time
Failed to load latest commit information.
.github Updated issue template Nov 9, 2018
src Fixed meta keys being removed by 'group' method Nov 9, 2018
.editorconfig Initial commit Dec 14, 2017
.eslintrc.json Setup linting + CircleCI (#7) Jan 15, 2018
.gitignore Update .gitignore Dec 23, 2017
.npmignore 2.1.1 (#34) Apr 17, 2018 update readme: routisan-three notice Mar 2, 2020
package.json 2.1.4 Nov 9, 2018

Vue Routisan

Latest Version on NPM Software License

Elegant route definitions for Vue Router. Based on the Laravel routing system.

🏭 Routisan 3, a complete rewrite, is under construction. Progress can be tracked on the project board. An alpha will be released when feature-parity has been reached. The current dev branch has, as a result, been abandoned. Some of the new features included in that branch, such as setting meta and using named views, are being included in v3.


You can install this package via yarn (or npm):

$ yarn add vue-routisan


Setting the view resolver

The view resolver allows the view() method to automatically require components for your routes. This saves you from having repetitive imports and requires when defining routes.

The view resolver is optional. If you choose to not configure it, you can import a component and pass it directly as the 2nd parameter of the view() method.

import Route from 'vue-routisan';

Route.setViewResolver((component) => {
    return require('./views/' + component).default;

Basic usage

The view() method receives the path and component route options respectively. If you defined the view resolver, you may directly specify the name of the component.

Reference: Vue route options

Route.view('/', 'Home');

Without the view resolver

import Home from './views/Home';

Route.view('/', Home);

Redirect routes

The redirect() method receives the path and redirect route options respectively.

Route.redirect('/home', '/');

NOTE: The methods view() and redirect() both return a route instance.

Named routes

The name() method sets the name option on the route instance.

Route.view('/user/profile', 'Profile').name('profile');

Navigation guards

The guard() method sets the beforeEnter option on the route instance.

const auth = (to, from, next) => { /* must be logged in */ };
const admin = (to, from, next) => { /* user must be admin */ };

Route.view('/account/settings', 'Settings').guard(auth);

You may also provide an array of guards. They will be executed in the order they are listed in the array.

This applies not only to the guard() method, you can do this with any of the methods below that can apply navigation guards to routes.

Route.view('/admin/dashboard', 'Dashboard').guard([auth, admin]);

Nested Routes

The children() method sets the children option on the route instance.

Route.view('/user', 'User').children(() => {
    Route.view('', 'UserList');
    Route.view(':id', 'UserDetails');
    Route.view(':id/edit', 'UserEdit');

Setting other route options

Use the options() method to set all other options on the route instance.

This method will not override the path and component options. They will be ignored if you specify them.

The children option expects a callback function instead of an array (See Nested Routes).

Reference: Vue route options

const guest = (to, from, next) => { /* already logged in */ };

Route.view('/auth/signin', 'Signin').options({
    name: 'login',
    beforeEnter: guest

beforeEnter has the alias guard for consistency with the guard() method.

Route.view('/auth/signup', 'Signup').options({
    guard: guest // alias for 'beforeEnter'

Route groups

Allows you to apply route options to multiple routes.

  • Navigation guards defined for the group will take priority over guards defined on the individual routes in the callback.
  • Route groups can be nested.{ beforeEnter: guest }, () => {
    Route.view('/auth/password/forgot', 'Forgot');
    Route.view('/auth/password/reset', 'Reset');

Route prefixes

Add a prefix to the path of each route in a group.{ prefix: '/blog' }, () => {{ prefix: '/posts' }, () => {
        Route.view('/', 'PostIndex');        // '/blog/posts'
        Route.view('/create', 'CreatePost'); // '/blog/posts/create'
        Route.view('/edit', 'EditPost');     // '/blog/posts/edit'

Automatically formatted paths

Options such as path, redirect, alias, and prefix are automatically formatted.

Slashes will not be prepended to the paths of nested routes.

'/'                // '/'
'products'         // '/products'
'categories/'      // '/categories'
'shop/checkout'    // '/shop/checkout'
'password/change/' // '/password/change'

Retrieve all routes

Route.all() returns an array of all the defined routes.


import Route from 'vue-routisan';

// define view resolver

// define routes

export default Route.all();


import Vue from 'vue';
import VueRouter from 'vue-router';
import routes from './routes';


export default new VueRouter({
    mode: 'history',
    routes: routes


Please see CONTRIBUTING for details.


Released under the MIT License.

You can’t perform that action at this time.