Super Dynamic Vue (or Ionic-Vue) Routes

Prerequisite: You should already know how to setup a basic vue (or ionic-vue) project and routes.

Problem:
As the application gets bigger, I find creating routes can be quite tedious and before you know it you have a file with so many lines you have you’ll end up on a Cmd+F mission every-time you need to make a change.

Goal:
Since a route structure is more-or-less the same, the goal is find a way to automate this process. A basic route structure needs a path, name, component. These need to be in every route we create.

Solution:
To have basic router setup, first I import our Components/Pages, then in route array I add a route for each page.

router.js

Basic router

As you can see the 3 routes I have are already a significant amount of code (most of the which is the same). The file will be bulky as the as the application grows.

Let’s get creative;

1. Get all the files in views folder
2. Create page path for each and use dynamic import for the component part of the route
3. Add the routes to the router instance

Step 1
Using require context, get all .vue files in a specified folder ./views

const requireModule = require.context("./views", false, /\.vue$/);
requireModule.keys()

keys() returns a list of all the pages in views folder. Now I have to loop through this list to get what I need for step 2.

Step 2
For this to work I need to create set rules and a way to validate these rules (more on validation later).

• File names must be in PascalCase if it’s more than one word, it must start with a capital letter if it’s one word.
• No special characters
• No nested folders — All files need to be in views root level. It can still work with nested folders but that adds more complexity when you build paths. If your Regex is good, go ahead and make nested folders

Views folder

To create a path I loop through the file list, extract the name from the filename string, create a url string by changing the PascalCase to a — separated string and then lowercase the whole string; AnotherPage will be another-page . I prefer this because — separated urls are better and PascalCase file names are better 🤷🤷‍♂.

Just before I start the loop I need to create a routes array so I can add each route object as the loop runs.

Route Validation

• I need to make sure each page filename starts with a capital letter if it’s one word.

if (moduleName.match(new RegExp(/^[A-Z]/)) === null) {
throw `Page file name must start with uppercase - ${file}`;
}

• In the script section of the page there must be a name property, this name property us what the page url will be. I use this to validate file naming. To archive all of this I need to “look” for this name property in each page I go through.

const viewComponent = requireModule(file).default;
if (viewComponent.name !== url) {
throw `[${file}] Page file name is not consistent with module name - expected ${url}, found ${viewComponent.name}`;
}

All the pieces of the loop put together is as follows

Now all that is remaining is to add the routes to the vue router (or ionic router) instance. And that is it.

— Foot notes —

• The logic in router.js is not specific to IonicVueRouter or VueRouter, it should work with any javascript framework that uses a Vue-Router-like navigation — I have not tried it on other frameworks though.
• For tasks that repeat regularly I try to “automate” as much as I can, I also create an ionic/vue npm package that renders fully customizable form

Our agency builds software using Vue, Nuxt, Firebase, Bootstrap, and Tailwind. For mobile apps, we use Ionic. We also offer technology advisory services for all your non-code-related needs.