{"id":22585,"library":"vite-plugin-auto-route","title":"vite-plugin-auto-route","description":"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.","status":"active","version":"2.1.0","language":"javascript","source_language":"en","source_url":null,"tags":["javascript","vue3","Vite","vue-router","plugin","typescript"],"install":[{"cmd":"npm install vite-plugin-auto-route","lang":"bash","label":"npm"},{"cmd":"yarn add vite-plugin-auto-route","lang":"bash","label":"yarn"},{"cmd":"pnpm add vite-plugin-auto-route","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required as a Vite plugin","package":"vite","optional":false},{"reason":"Generates routes for vue-router, but not a direct dependency; user must have it installed","package":"vue-router","optional":false}],"imports":[{"note":"ESM is recommended; CJS may work but is not officially supported.","wrong":"const VitePluginAutoRoute = require('vite-plugin-auto-route')","symbol":"default","correct":"import VitePluginAutoRoute from 'vite-plugin-auto-route'"},{"note":"GeneratedRoute is a type export, not a runtime value. Use type import.","wrong":"import { GeneratedRoute } from 'vite-plugin-auto-route'","symbol":"GeneratedRoute","correct":"import type { GeneratedRoute } from 'vite-plugin-auto-route'"},{"note":"Options interface is also a type export.","wrong":"const { AutoRoutesOptions } = require('vite-plugin-auto-route')","symbol":"AutoRoutesOptions","correct":"import type { AutoRoutesOptions } from 'vite-plugin-auto-route'"}],"quickstart":{"code":"// vite.config.ts\nimport { defineConfig } from 'vite';\nimport vue from '@vitejs/plugin-vue';\nimport VitePluginAutoRoute from 'vite-plugin-auto-route';\n\nexport default defineConfig({\n  plugins: [\n    vue(),\n    VitePluginAutoRoute({\n      pagesDir: './src/views',\n      routesFile: './src/router/autoRoutes.ts',\n    }),\n  ],\n});","lang":"typescript","description":"Basic setup: registers the plugin in vite.config.ts, generating routes from views folder to a file automatically."},"warnings":[{"fix":"Manually refresh the browser after adding new files.","message":"Hot module reloading does not work for new pages. Adding a new .vue file requires a full page refresh to see the new route.","severity":"gotcha","affected_versions":"<3.0.0"},{"fix":"Use ES module import: import VitePluginAutoRoute from 'vite-plugin-auto-route'","message":"CommonJS require pattern may not work in future versions. ESM is recommended.","severity":"deprecated","affected_versions":">=2.0.0"},{"fix":"Follow the provided setup with import.meta.glob to map string paths to actual components.","message":"The plugin generates a TypeScript file with explicit component paths. You must use import.meta.glob to resolve them, as shown in the docs.","severity":"gotcha","affected_versions":">=1.0.0"},{"fix":"Install the correct package: 'vite-plugin-auto-route'","message":"If you install the plugin as 'vite-plugin-auto-routes' (note the 's'), you will get a different, unrelated package.","severity":"gotcha","affected_versions":"*"}],"env_vars":null,"last_verified":"2026-04-27T00:00:00.000Z","next_check":"2026-07-26T00:00:00.000Z","problems":[{"fix":"Run npm install --save-dev vite-plugin-auto-route and ensure package.json contains it.","cause":"Missing package installation or incorrect import path.","error":"Cannot find module 'vite-plugin-auto-route' or its corresponding type declarations."},{"fix":"Use ES module import: import VitePluginAutoRoute from 'vite-plugin-auto-route'","cause":"Using CommonJS require() or incorrect default import.","error":"Plugin 'vite-plugin-auto-route' is not a function."},{"fix":"Set routesFile to a valid file path string, e.g., './src/router/autoRoutes.ts'","cause":"Passing an object or non-string value to routesFile option.","error":"Error: The 'routesFile' option must be a string."},{"fix":"Ensure pagesDir exists and contains .vue files; check the path relative to project root.","cause":"pagesDir option pointing to incorrect or empty directory.","error":"No routes generated. The views directory is empty or path is wrong."}],"ecosystem":"npm","meta_description":null,"install_score":null,"install_tag":null,"quickstart_score":null,"quickstart_tag":null}