This week we are going to take a look at adding Vue Router to the ElePas browser extension and try to better organize our user flow. If you are joining us for the first time, we encourage you to read up on our blog series and see what else we have done so far.
Let’s all get on the same page and talk about Vue Router and what it is. In the Single Page Application (SPA) world, you can either create your own routing method, use props to navigate through components, or use a native application to make your life significantly easier, like Vue Router. You know what makes Vue Router even better? It’s an official package! Definitely check out the documentation if you are interested in using it in your project.
If you build extensions regularly, then you know that the paths are expected to be like a standard static website – you direct your manifest file to load up the chrome://somethingextensionurl/popup.html link and then you can add more html pages from there. When you use Vue Router, you have to keep that html link, but change the way Vue Router needs to work. This is the code that we use to get it initiated:
You’ll notice that we don’t set a mode here. It’s common for SPA to have a mode for “history” and some applications will use “abstract”, but neither of those will work here – we have to use the “hash” mode to make this work and keep it compatible with the extension structure. Afterwards, we just set the routes as we would any other application and our extension now has router support!
Before we went full into Vue Router, we were using the “control it all through props” setup that was causing some maintenance headaches. In summary, this is how the code looked before hand.
Look at how gross that is! We had a prop trigger for a loading page, then one for showing then login, then a complex IF statement for if its a credential page, or an editing credential page, and then a catch all for clients. Imagine if we needed just another page or two – even more complex IF statements just to make it work properly. Now – imagine another developer joins the team and has to understand this flow and run through the prop coordination in their feature additions. It’s a pain and it doesn’t make natural sense. Vue Router really helps ease the development process and keeps it intuitive!
In our next blog post, we are going to take a look at enhancing our Vuex modules and reorganizing our actions across the extension.
ElePass is an agency password management solution built with the purpose of enhancing the security within agencies and other businesses who work with clients on a regular basis. If you would like to try out ElePass and see our browser extensions in use, we have a FREE 14-day trial available to explore the full feature set of ElePass. Once your trial is finished, you can continue using ElePass as a single user as part of our no cost freelancer plan.