Vue 3 Auto Routing By File Structure

One of my problem when working with VueJS is when creating routes especially if the project is getting bigger and it becomes a problem trying to maintain your route.ts or route.js. I still remember a project that it has too many pages that you have to update your routes when you create a new page and you have to update your route file when ever you remove a page just to avoid errors showing up.

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.

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!

If you enjoy this article and would like to show your support, you can easily do so by buying me a coffee. Your contribution is greatly appreciated!