Vue uto 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 srcpagesabout.vue.
<template> <div>This is the about page</div> </template>
Lets create our home page by using index in srcpagesindex.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!
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!

Hot AI Tools

Undresser.AI Undress
AI-powered app for creating realistic nude photos

AI Clothes Remover
Online AI tool for removing clothes from photos.

Undress AI Tool
Undress images for free

Clothoff.io
AI clothes remover

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

Hot Article

Hot Tools

Notepad++7.3.1
Easy-to-use and free code editor

SublimeText3 Chinese version
Chinese version, very easy to use

Zend Studio 13.0.1
Powerful PHP integrated development environment

Dreamweaver CS6
Visual web development tools

SublimeText3 Mac version
God-level code editing software (SublimeText3)

Hot Topics

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

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.

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 in JavaScript? When processing data, we often encounter the need to have the same ID...

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.

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

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. �...
