Fluent Vuejs nested routes — js version

Photo by Deva Darshan on Unsplash

Well I think if you know vuejs and vue-router you would know that the js code to manage the nested routes would be a pain when you get too much code for all of your views. So why not make it a little bit simpler.

If you know laravel, you know that laravel takes the approach as vue router to register routes. You need to register them in specific php files, files full of route information for each controller; but the difference is in how the Route instance in laravel gives you the flexibility to handle these route registrations. I got inspired by how laravel handles this route registration and tried it for vue as well and lets see how that worked out.

Lets start ;)

So when you create your vuejs project with vue-router the following will happen:

Here is how the router folder looks like when you create a vue project with the router

I would like to add something here like maybe a Route.js file which contains the Route class. This class will be the core to help registering and understanding the routes better. Lets start creating it.

The above sample, shows the first basic implementation of the Route class, now lets see how to use this and what is the idea.

The code inside your router index.js by default looks like below, which you will change in short.

Now lets assume that you have a route to load posts and by using the router-link you want the router to stay active when you open a post there. We are going to change the structure of the folders to the following structure.

added the routes folder to handler them easier

Now you add and register only routes needed inside your posts view like below with the help of Route.js

In here you may notice that there is a component we are relating to the ‘/posts’ path. This component is responsible to load whatever this route contains, inside itself. The vue code inside this component contains a router-view and you also can load a list of posts here for the user to select from and load the post based on the selected item. But where does the route for the selected post goes? we need to change the Route class.

vue-router, route object accepts a property. Children which is basically an array of routes. So we are going to add the following to the Route class:

withChildren(children) {
    this.children = children;
    return this;
}

By this we now can add the nested route to the posts.js routes like below:

Now if you notice you see that now you can go on and add routes under routes and under routes. But do you know what makes the whole thing more spicy? adding laravel routes group feature here too. So we are going to add a static function to the Route class which accepts an object to set on all routes which receives as its second argument.

Small hint: Please, please always put comments and description on the arguments of a function in javascript. I mean if the language gives you freedom it does not mean you should follow no rule ;)

Now lets use this grouping and see it in action.

Now assume that you have an ‘Event’ page (an actual event with actual real venue and stuff. Not a development thing 😉) you want to nest the routes for tickets, occurrences and orders in dashboard for the organizer now you can do it like below with the combination of children and group.

Now you see what happened, in the group you do not need to set the ‘events.event’ prefix on each route, the group method will take care of it.

How to register this?

Well it is simple, do you remember the route index.js file that I said “it looks like below , and you will change it later”? I did not forget that, lets now change the index.js to the following:

Now you see how it changed. Now you have the advantage of keeping this index.js clean and isolate the routes based on their domain.

Trying to keep it clean is the investment in time, believe me 😉.

Good luck ;)