Registry / web-framework / vite-plugin-auto-route

vite-plugin-auto-route

library2.1.0jsnpmunverified

A Vite plugin for automatic file-based routing in Vue 3, similar to Nuxt, Next.js, and UmiJS. Current stable version is 2.1.0. It generates vue-router route configurations from a directory structure, producing lazy-loaded components and nested routes automatically. Released as a dev dependency, it supports both ESM and CJS but recommends ESM. Key differentiator: lightweight, no full framework overhead, integrates directly with Vite and Vue Router without additional runtime dependencies. Does not support hot module reloading for new routes, requires page refresh after adding files. Ships TypeScript types.

web-framework serialization

npm install vite-plugin-auto-route

package ↗

INSTALL

IMPORT

SIG · VITE-PLUGIN-AUTO-R

vite-plugin-auto-route

web-frameworkjavascriptv2.1.0

Install

—

Import

—

Disk

—

Pass rate

0/ 6

Env Coverage0 / 6

glibc

18–22

musl

18–22

Install & Compatibility

Where this runs

tested against v? · npm install

Install × environment matrix

Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux

musl

node 18–223 runs

build_error

glibc

node 18–223 runs

build_error

Code

Verified usage

Verified import paths — ran on the pinned version, not inferred.

default

✓ import VitePluginAutoRoute from 'vite-plugin-auto-route'

✗ const VitePluginAutoRoute = require('vite-plugin-auto-route')

ESM is recommended; CJS may work but is not officially supported.

GeneratedRoute

✓ import type { GeneratedRoute } from 'vite-plugin-auto-route'

✗ import { GeneratedRoute } from 'vite-plugin-auto-route'

GeneratedRoute is a type export, not a runtime value. Use type import.

AutoRoutesOptions

✓ import type { AutoRoutesOptions } from 'vite-plugin-auto-route'

✗ const { AutoRoutesOptions } = require('vite-plugin-auto-route')

Options interface is also a type export.

Basic setup: registers the plugin in vite.config.ts, generating routes from views folder to a file automatically.

// vite.config.ts import { defineConfig } from 'vite'; import vue from '@vitejs/plugin-vue'; import VitePluginAutoRoute from 'vite-plugin-auto-route'; export default defineConfig({ plugins: [ vue(), VitePluginAutoRoute({ pagesDir: './src/views', routesFile: './src/router/autoRoutes.ts', }), ], });

null --version

Debug

Known issues

gotchaHot module reloading does not work for new pages. Adding a new .vue file requires a full page refresh to see the new route.

fix

Manually refresh the browser after adding new files.

affects: <3.0.0

deprecatedCommonJS require pattern may not work in future versions. ESM is recommended.

fix

Use ES module import: import VitePluginAutoRoute from 'vite-plugin-auto-route'

affects: >=2.0.0

gotchaThe plugin generates a TypeScript file with explicit component paths. You must use import.meta.glob to resolve them, as shown in the docs.

fix

Follow the provided setup with import.meta.glob to map string paths to actual components.

affects: >=1.0.0

gotchaIf you install the plugin as 'vite-plugin-auto-routes' (note the 's'), you will get a different, unrelated package.

fix

Install the correct package: 'vite-plugin-auto-route'

affects: *

Errors

Common errors & fixes

Cannot find module 'vite-plugin-auto-route' or its corresponding type declarations.

Missing package installation or incorrect import path.

fix

Run npm install --save-dev vite-plugin-auto-route and ensure package.json contains it.

Plugin 'vite-plugin-auto-route' is not a function.

Using CommonJS require() or incorrect default import.

fix

Use ES module import: import VitePluginAutoRoute from 'vite-plugin-auto-route'

Error: The 'routesFile' option must be a string.

Passing an object or non-string value to routesFile option.

fix

Set routesFile to a valid file path string, e.g., './src/router/autoRoutes.ts'

No routes generated. The views directory is empty or path is wrong.

pagesDir option pointing to incorrect or empty directory.

fix

Ensure pagesDir exists and contains .vue files; check the path relative to project root.

Upgrade

Version history

2.1.0latest on npm

Audit

Dependencies

viterequiredRequired as a Vite plugin

vue-routerrequiredGenerates routes for vue-router, but not a direct dependency; user must have it installed

Agent activity

13 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

packagehttps://www.npmjs.com/package/vite-plugin-auto-route ↗