vite-plugin-routes

File based typed routing for Vue Router with TypeScript support ✨

Features

• 📁 File Based Routes are automatically generated from your files
• 🔄 TypeScript Support Full type safety for your routes
• 🌐 Multiple Frameworks Works with Vite, Webpack, Rollup, and esbuild
• 🎨 Meta Configuration Configure routes via route blocks in your pages
• 🔌 Vue Router Integration Seamless integration with Vue Router 4
• 📱 HMR Optimized Fast hot module replacement
• 🛠️ Flexible Configuration Customize route patterns, exclusions, and more

Install

npm install -D vite-plugin-routes
# or
yarn add -D vite-plugin-routes
# or
pnpm add -D vite-plugin-routes
# or
bun add -D vite-plugin-routes

Get Started

Add VueRouter plugin before Vue plugin:

Vite

// vite.config.ts
import VueRouter from 'vite-plugin-routes/vite'

export default defineConfig({
  plugins: [
    VueRouter({
      /_ options _/
    }),
    // ⚠️ Vue must be placed after VueRouter()
    Vue(),
  ],
})

Rollup

// rollup.config.js
import VueRouter from 'vite-plugin-routes/rollup'

export default {
  plugins: [
    VueRouter({
      /_ options _/
    }),
    // ⚠️ Vue must be placed after VueRouter()
    Vue(),
  ],
}

Webpack

// webpack.config.js
module.exports = {
  /_ ... _/
  plugins: [
    require('vite-plugin-routes/webpack')({
      /_ options _/
    }),
  ],
}

Vue CLI

// vue.config.js
module.exports = {
  configureWebpack: {
    plugins: [
      require('vite-plugin-routes/webpack')({
        /_ options _/
      }),
    ],
  },
}

esbuild

// esbuild.config.js
import { build } from 'esbuild'
import VueRouter from 'vite-plugin-routes/esbuild'

build({
  plugins: [VueRouter()],
})

Setup

After installing, you should run your dev server(usually npm run dev)to generate the first version of the types. Then you need to add the types to your tsconfig.json.

{
  "include": [
    // ...
    "./typed-router.d.ts"
  ],
  // ...
  "compilerOptions": {
    // ...
    "moduleResolution": "Bundler"
    // ...
  }
}

Then, if you have an env.d.ts file like the one created by npm vue create <my-project>, add the vite-plugin-routes/client types to it:

// env.d.ts
/// <reference types="vite/client" />
/// <reference types="vite-plugin-routes/client" />

If you don't have an env.d.ts file, you can create one and add the vite-plugin-routes types to it or you can add them to the types property in your tsconfig.json:

{
  "compilerOptions": {
    // ...
    "types": ["vite-plugin-routes/client"]
  }
}

Finally, import the generated routes from vue-router/auto-routes and pass them to the router:

import { createRouter, createWebHistory } from 'vue-router'
+import { routes } from 'vue-router/auto-routes'

createRouter({
  history: createWebHistory(),
  // pass the generated routes written by the plugin 🤖

+ routes,

})

Configuration

// vite.config.ts
import VueRouter from 'vite-plugin-routes/vite'

export default defineConfig({
  plugins: [
    VueRouter({
      // Customize your routes
      routesFolder: ['src/pages'], // default: 'src/pages'
      exclude: [], // Patterns to exclude from route generation
      // ... other options
    }),
    Vue(),
  ],
})

Available Options

Option	Type	Default	Description
routesFolder	string | string[]	'src/pages'	Path(s) to the pages directory. Supports globs.
exclude	string[]	[]	Patterns to exclude from route generation.
filePatterns	string[]	['**/*.vue']	File patterns to include for route generation.

Testing

bun test

Changelog

Please see our releases page for more information on what has changed recently.

Contributing

Please review the Contributing Guide for details.

Community

For help, discussion about best practices, or any other conversation that would benefit from being searchable:

Discussions on GitHub

For casual chit-chat with others using this package:

Join the Stacks Discord Server

Postcardware

"Software that is free, but hopes for a postcard." We love receiving postcards from around the world showing where vite-plugin-routes is being used! We showcase them on our website too.

Our address: Stacks.js, 12665 Village Ln #2306, Playa Vista, CA 90094, United States 🌎

Sponsors

We would like to extend our thanks to the following sponsors for funding Stacks development. If you are interested in becoming a sponsor, please reach out to us.

• JetBrains
• The Solana Foundation

Credits

• All Contributors

License

The MIT License (MIT). Please see LICENSE for more information.

Made with 💙