vite-plugin-pages

File system based routing for Vue 3 / React / Solid applications using Vite

Reads your pages directory and generates a list of routes that you pass to your router.

Framework	Router	Module id
Vue 3	vue-router	~pages
React	react-router (v6+)	~react-pages
Solid	@solidjs/router	~solid-pages

Vue users should consider vue-router's built-in file-based routing instead. It provides similar features with deeper vue-router integration.

Quick Start

vite-plugin-pages v1 requires Node.js 22.12 or later, Vite 6 or later, and an ESM project or ESM-compatible Vite configuration. If you upgrade from v0.33, read the v1 migration guide.

Start with an existing Vue, React, or Solid Vite project. Install the plugin:

npm install -D vite-plugin-pages

Add it to your Vite configuration:

import Pages from 'vite-plugin-pages'

export default {
  plugins: [
    Pages(),
  ],
}

Create src/pages/index.vue, src/pages/index.tsx, or src/pages/index.jsx. Then follow Getting Started to connect the generated routes to your framework router.

Documentation

• Getting Started — install and set up each framework
• Configuration — every plugin option
• Base Path — deploy below the domain root
• File System Routing — routes, nesting, and routing styles
• Route Data — <route> blocks and JSX comments
• Custom Resolver — the PageResolver API
• Migrate to v1 — requirements and breaking changes

Sitemap generation

To generate a sitemap from the generated routes, use vite-plugin-pages-sitemap.

License

MIT License © 2021-PRESENT hannoeru