Home Web Front-end JS Tutorial Vue uto Routing By File Structure

Vue uto Routing By File Structure

Jul 29, 2024 am 01:28 AM

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
Copy after login

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
Copy after login

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
Copy after login

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)),
        },
    },

});
Copy after login

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" />
Copy after login

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;
Copy after login

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 srcpagesabout.vue.

<template>
    <div>This is the about page</div>
</template>
Copy after login

Lets create our home page by using index in srcpagesindex.vue.

<template>
    <div>This is Home Page</div>
</template>
Copy after login

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>
Copy after login

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

Vue uto Routing By File Structure

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!

Vue uto Routing By File Structure

The above is the detailed content of Vue uto Routing By File Structure. For more information, please follow other related articles on the PHP Chinese website!

Statement of this Website
The content of this article is voluntarily contributed by netizens, and the copyright belongs to the original author. This site does not assume corresponding legal responsibility. If you find any content suspected of plagiarism or infringement, please contact admin@php.cn

Hot Article Tags

Notepad++7.3.1

Notepad++7.3.1

Easy-to-use and free code editor

SublimeText3 Chinese version

SublimeText3 Chinese version

Chinese version, very easy to use

Zend Studio 13.0.1

Zend Studio 13.0.1

Powerful PHP integrated development environment

Dreamweaver CS6

Dreamweaver CS6

Visual web development tools

SublimeText3 Mac version

SublimeText3 Mac version

God-level code editing software (SublimeText3)

Replace String Characters in JavaScript Replace String Characters in JavaScript Mar 11, 2025 am 12:07 AM

Replace String Characters in JavaScript

Custom Google Search API Setup Tutorial Custom Google Search API Setup Tutorial Mar 04, 2025 am 01:06 AM

Custom Google Search API Setup Tutorial

Example Colors JSON File Example Colors JSON File Mar 03, 2025 am 12:35 AM

Example Colors JSON File

8 Stunning jQuery Page Layout Plugins 8 Stunning jQuery Page Layout Plugins Mar 06, 2025 am 12:48 AM

8 Stunning jQuery Page Layout Plugins

10 jQuery Syntax Highlighters 10 jQuery Syntax Highlighters Mar 02, 2025 am 12:32 AM

10 jQuery Syntax Highlighters

Build Your Own AJAX Web Applications Build Your Own AJAX Web Applications Mar 09, 2025 am 12:11 AM

Build Your Own AJAX Web Applications

What is 'this' in JavaScript? What is 'this' in JavaScript? Mar 04, 2025 am 01:15 AM

What is 'this' in JavaScript?

10  JavaScript & jQuery MVC Tutorials 10 JavaScript & jQuery MVC Tutorials Mar 02, 2025 am 01:16 AM

10 JavaScript & jQuery MVC Tutorials

See all articles