Vue 3 Auto Routing By File Structure

One challenge I've faced while working with VueJS is managing routes, especially as the project grows larger. It becomes increasingly difficult to maintain the route.ts or route.js file. I recall a project with numerous pages where every time a new page was added or an existing one was removed, the routes had to be updated to prevent errors. This constant need for updates made the process quite cumbersome.

So I started to look for how to make the auto routing using file based. Trying to search in the google was hard to find because most of the result I fount in the internet is mostly for webpack and for version 2. So I have to ask it in the Vue Github repo discussion and I got an answer.

Introducing Unplugin Vue Router this is a Typed, file-based routing for Vue 3. And it is actually easy to set it up. This is experimental as they stated in their Github readme file.

First Lets create our `Vue project` from scratch. As we all know we can generate a project by running this command, and then answer some options. If your not familiar how to do it you can check Quick Start in VueJs Page.

pnpm create vue@latest

So in this example this is how I created the project.

pnpm create vue@latest

Vue.js - The Progressive JavaScript Framework

√ Project name: ... vue-auto-route
√ Add TypeScript? ... No / Yes
√ Add JSX Support? ... No / Yes
√ Add Vue Router for Single Page Application development? ... No / Yes
√ Add Pinia for state management? ... No / Yes
√ Add Vitest for Unit Testing? ... No / Yes
√ Add an End-to-End Testing Solution? » No
√ Add ESLint for code quality? ... No / Yes
√ Add Vue DevTools 7 extension for debugging? (experimental) ... No / Yes

Scaffolding project in D:\Projects\Testing\vue-auto-route...

Done. Now run:

  cd vue-auto-route
  pnpm install
  pnpm dev

We are going to go with Select TypeScript. I also enabled Router so that it auto regenerate pages for me.

Lets cd to our project, and install the dependencies. So depending on your package manager you used you can use it. For me I am using the pnpm I am starting to like it. Now once our project is created, we now had to install unplugin-vue-router.

pnpm add -D unplugin-vue-router

Now, lets update vite.config.ts . Make sure you put the plugin in index 0.

import { fileURLToPath, URL } from "node:url";
import VueRouter from "unplugin-vue-router/vite";
import { defineConfig } from "vite";
import vue from "@vitejs/plugin-vue";

// https://vitejs.dev/config/
export default defineConfig({
    plugins: [
        VueRouter({
            /* options */
        }),
        // ⚠️ Vue must be placed after VueRouter()
        vue(),
    ],
    resolve: {
        alias: {
            "@": fileURLToPath(new URL("./src", import.meta.url)),
        },
    },
});

Next Lets Update env.d.ts so that our editor can easily find the types for our package.

/// <reference types="vite/client" />
/// <reference types="unplugin-vue-router/client" />

Then let us update our router index.ts in src/router/index.ts.

import { createRouter, createWebHistory } from "vue-router";
import { routes, handleHotUpdate } from "vue-router/auto-routes";

const router = createRouter({
    history: createWebHistory(import.meta.env.BASE_URL),
    routes,
});

if (import.meta.hot) {
    handleHotUpdate(router);
}

export default router;

Now that everything is done, we can now create src/pages directory, and in this folder or directory is where we add our pages and it automatically create routes for based on file structure. If your familiar with Nuxt, it is something like it.

Lets create about page in src\pages\about.vue.

<template>
    <div>This is the about page</div>
</template>

Lets create our home page by using index in src\pages\index.vue.

<template>
    <div>This is Home Page</div>
</template>

Then We can then run our vue app, by running dev script. pnpm dev. Their you go, if you click Home, you will be redirected to home page, if you click about you will be redirected to about page.

Now, everything is set up for you. If your not familiar about router folder structure. You can check this doc https://uvr.esm.is/guide/file-based-routing.html.

Lets try adding a slug component like src/pages/blog/[id].vue with this content.

<script setup>
const { id } = useRoute().params;
</script>
<template>
    <div>This is the blog post with id: {{ id }}</div>
</template>

Now lets try to run pnpm dev again. And when you go to `http://localhost:5173/blog/6` you should be getting this.

Amazing Right? I hope this short blog helped you on your VueJS Journey. Have a Good day.

Routing is important in Vue for several reasons:

1. Single-Page Application (SPA) functionality:

   • Allows navigation between different views without reloading the entire page

   • Provides a smoother, more app-like user experience

2. URL management:

   • Enables bookmarking specific pages or states of the application

   • Allows sharing direct links to specific views

3. Application structure:

   • Helps organize the application into logical sections or pages

   • Improves code maintainability by separating concerns

4. Navigation control:

   • Enables programmatic navigation within the application

   • Allows for implementing navigation guards for authentication or other checks

5. SEO benefits:

   • When configured properly, can improve search engine indexing of different app sections

6. History management:

   • Integrates with browser history, enabling back/forward navigation