Automatically loading Vue routes

In order to create maintainable code, we can use the strategy of auto-importing files that have the same structure in our project. Like the routes in vue-router, when the application gets larger, we find a huge amount of files being imported and handled manually. In this recipe, we will learn a trick to use the webpack require.context function to automatically inject files for us.

This function will read the file content and add the routes to an array that will be exported into our file by default. You can improve this recipe by adding a more controlled route import or even environment-based route rules.