Set Up Auto Routes in Vue Router with TypeScript Support

Setting up auto routes in Vue Router using file-based routing and TypeScript simplifies our routing setup, making our codebase cleaner and more manageable. We'll use unplugin-vue-router to automate route generation based on our file structure, similar to Nuxt.js. This eliminates the need for manual route definitions.

We'll start by installing and configuring unplugin-vue-router, adjusting our directory structure, and resolving TypeScript errors. By the end, our app will dynamically generate routes, providing a streamlined and efficient routing system.

PS: To install the same version used in this lesson, make sure to use the following command: npm install -D unplugin-vue-router@^0.9.0

Links

• Vue School Course - Enhanced Routing with UnPlugin Vue Router
• Vue School Article - Automatic File-Based Routing in Vue.js with TypeScript Support
• File Based Routing - Unplugin Vue Router
• Typed Routes - Unplugin Vue Router
• Nuxt.js - Routing
• Vitejs - Alias
• Webhint - Visual Studio Code Extension