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 AI Tools

Undresser.AI Undress

Undresser.AI Undress

AI-powered app for creating realistic nude photos

AI Clothes Remover

AI Clothes Remover

Online AI tool for removing clothes from photos.

Undress AI Tool

Undress AI Tool

Undress images for free

Clothoff.io

Clothoff.io

AI clothes remover

Video Face Swap

Video Face Swap

Swap faces in any video effortlessly with our completely free AI face swap tool!

Hot Tools

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)

What should I do if I encounter garbled code printing for front-end thermal paper receipts? What should I do if I encounter garbled code printing for front-end thermal paper receipts? Apr 04, 2025 pm 02:42 PM

Frequently Asked Questions and Solutions for Front-end Thermal Paper Ticket Printing In Front-end Development, Ticket Printing is a common requirement. However, many developers are implementing...

Demystifying JavaScript: What It Does and Why It Matters Demystifying JavaScript: What It Does and Why It Matters Apr 09, 2025 am 12:07 AM

JavaScript is the cornerstone of modern web development, and its main functions include event-driven programming, dynamic content generation and asynchronous programming. 1) Event-driven programming allows web pages to change dynamically according to user operations. 2) Dynamic content generation allows page content to be adjusted according to conditions. 3) Asynchronous programming ensures that the user interface is not blocked. JavaScript is widely used in web interaction, single-page application and server-side development, greatly improving the flexibility of user experience and cross-platform development.

Who gets paid more Python or JavaScript? Who gets paid more Python or JavaScript? Apr 04, 2025 am 12:09 AM

There is no absolute salary for Python and JavaScript developers, depending on skills and industry needs. 1. Python may be paid more in data science and machine learning. 2. JavaScript has great demand in front-end and full-stack development, and its salary is also considerable. 3. Influencing factors include experience, geographical location, company size and specific skills.

How to merge array elements with the same ID into one object using JavaScript? How to merge array elements with the same ID into one object using JavaScript? Apr 04, 2025 pm 05:09 PM

How to merge array elements with the same ID into one object in JavaScript? When processing data, we often encounter the need to have the same ID...

Is JavaScript hard to learn? Is JavaScript hard to learn? Apr 03, 2025 am 12:20 AM

Learning JavaScript is not difficult, but it is challenging. 1) Understand basic concepts such as variables, data types, functions, etc. 2) Master asynchronous programming and implement it through event loops. 3) Use DOM operations and Promise to handle asynchronous requests. 4) Avoid common mistakes and use debugging techniques. 5) Optimize performance and follow best practices.

How to achieve parallax scrolling and element animation effects, like Shiseido's official website?
or:
How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? How to achieve parallax scrolling and element animation effects, like Shiseido's official website? or: How can we achieve the animation effect accompanied by page scrolling like Shiseido's official website? Apr 04, 2025 pm 05:36 PM

Discussion on the realization of parallax scrolling and element animation effects in this article will explore how to achieve similar to Shiseido official website (https://www.shiseido.co.jp/sb/wonderland/)...

The Evolution of JavaScript: Current Trends and Future Prospects The Evolution of JavaScript: Current Trends and Future Prospects Apr 10, 2025 am 09:33 AM

The latest trends in JavaScript include the rise of TypeScript, the popularity of modern frameworks and libraries, and the application of WebAssembly. Future prospects cover more powerful type systems, the development of server-side JavaScript, the expansion of artificial intelligence and machine learning, and the potential of IoT and edge computing.

The difference in console.log output result: Why are the two calls different? The difference in console.log output result: Why are the two calls different? Apr 04, 2025 pm 05:12 PM

In-depth discussion of the root causes of the difference in console.log output. This article will analyze the differences in the output results of console.log function in a piece of code and explain the reasons behind it. �...

See all articles