Make the Router a Vue.js Plugin

Part 4 of 4 in our Creating Your Own Router series.
Written by Alex Jover Morales

So far we’ve build the router in a component and a history module within the source code of our app. The problem of it is that the router is tied to the app, specially because the routes are defined within the AppRouter component.

That could be improved by moving out the routes from the component and passing them as a parameter. But still, the developer must import the AppRouter component and the history.js module and use it around.

We could improve and simplify it by creating a Vue.js plugin, which will make the router 100% reusable between apps and will allow to make it easier to use and customizable for the final developer.

Creating a Vue.js plugin is not something that we need do from scratch: we can create it by using the components and modules that we already have. That means the process to create a plugin could be progressive, you can delay it until you need it. In our case, we have the AppRouter.vue component and the history.js module already in place.

Let’s see how we can use them to create a Vue.js plugin for the Router.

Read more