{"id":15026,"library":"vue-auto-routing","title":"Vue Auto Routing","description":"vue-auto-routing is a JavaScript library designed for automatically generating Vue Router routes by convention, mimicking the file-system-based routing approach popularized by frameworks like Nuxt.js. It leverages `vue-route-generator` under the hood to transform component files within a specified directory (e.g., `src/pages`) into a Vue Router configuration. The library ships with a Webpack plugin that integrates into the build process to dynamically generate these routes. As of its current stable version `1.0.1`, it supports both Vue 2 and Vue 3 projects, with `v1.0.0` introducing official Vue 3 compatibility. While `vue-auto-routing` provides the core generation logic, users often prefer `vue-cli-plugin-auto-routing` for a more integrated setup within Vue CLI projects, which includes additional features like automatic layout resolution. The library has a moderate release cadence, focusing on compatibility and core feature enhancements.","status":"active","version":"1.0.1","language":"javascript","source_language":"en","source_url":"https://github.com/ktsn/vue-auto-routing","tags":["javascript","Vue","Vue Router","routing","auto generate","generator","webpack","plugin","typescript"],"install":[{"cmd":"npm install vue-auto-routing","lang":"bash","label":"npm"},{"cmd":"yarn add vue-auto-routing","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-auto-routing","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Required for the `VueAutoRoutingPlugin` to integrate into the build process.","package":"webpack","optional":false},{"reason":"Peer dependency as it generates routes directly consumable by Vue Router.","package":"vue-router","optional":false},{"reason":"Peer dependency for the Vue application itself.","package":"vue","optional":false}],"imports":[{"note":"This import path 'vue-auto-routing' is a virtual module handled by the Webpack plugin, resolving to the generated array of Vue Router route objects. Do not attempt to dynamically require it.","wrong":"const routes = require('vue-auto-routing');","symbol":"routes","correct":"import routes from 'vue-auto-routing';"},{"note":"The plugin is a default export from its specific path. In typical Webpack configuration files, CommonJS `require` syntax is also very common: `const VueAutoRoutingPlugin = require('vue-auto-routing/lib/webpack-plugin');`","wrong":"import { VueAutoRoutingPlugin } from 'vue-auto-routing/lib/webpack-plugin';","symbol":"VueAutoRoutingPlugin","correct":"import VueAutoRoutingPlugin from 'vue-auto-routing/lib/webpack-plugin';"}],"quickstart":{"code":"import { createApp } from 'vue';\nimport { createRouter, createWebHistory } from 'vue-router';\nimport App from './App.vue';\n\n// This 'routes' import is a virtual module provided by vue-auto-routing's Webpack plugin.\n// It dynamically contains the generated route configurations based on your 'pages' directory.\nimport routes from 'vue-auto-routing';\n\n// 1. Configure Vue Router with the automatically generated routes (for Vue 3)\nconst router = createRouter({\n  history: createWebHistory(),\n  routes,\n});\n\n// 2. Mount your Vue 3 application\ncreateApp(App).use(router).mount('#app');\n\n// --- webpack.config.js (or vue.config.js if using Vue CLI) ---\nconst VueAutoRoutingPlugin = require('vue-auto-routing/lib/webpack-plugin');\nconst path = require('path');\n\nmodule.exports = {\n  // ... other webpack configurations ...\n  plugins: [\n    new VueAutoRoutingPlugin({\n      pages: path.resolve(__dirname, 'src/pages'), // REQUIRED: Path to your page components directory\n      importPrefix: '@/pages/', // OPTIONAL: Prefix for importing components in generated routes (e.g., '@/pages/Home.vue')\n      // output: 'src/router/generated-routes.js', // OPTIONAL: Specify a physical output file for inspection or explicit import\n    }),\n  ],\n  resolve: {\n    alias: {\n      '@': path.resolve(__dirname, 'src'), // Ensure '@' alias is configured if used in importPrefix\n    },\n  },\n};\n\n/* Example: src/pages/About.vue\n<template>\n  <div>About Page</div>\n</template>\n\n<route>\n{\n  \"meta\": {\n    \"title\": \"About Us\"\n  }\n}\n</route>\n*/","lang":"typescript","description":"Demonstrates how to integrate `vue-auto-routing` by configuring its Webpack plugin and consuming the generated routes in a Vue 3 application's router setup. Includes a minimal Webpack configuration example."},"warnings":[{"fix":"Migrate all route metadata definitions from `<route-meta>` to the new `<route>` custom block format within your Vue components. For example, change `<route-meta>{ ... }</route-meta>` to `<route>{ \"meta\": { ... } }</route>`.","message":"The `<route-meta>` custom block for defining route metadata has been deprecated in favor of the `<route>` custom block. It will no longer be processed by the route generator and might lead to ignored metadata.","severity":"breaking","affected_versions":">=0.5.0"},{"fix":"Update any hardcoded route names used for programmatic navigation (e.g., `router.push({ name: 'users-index' })`) or component lookups to remove the `-index` suffix.","message":"Route names generated for `index.vue` components no longer include the `-index` suffix. For instance, a component located at `/users/index.vue` will now generate a route with the name `users` instead of `users-index`.","severity":"breaking","affected_versions":">=0.5.0"},{"fix":"For Vue 2 applications, use `Vue.use(Router)` and instantiate the router with `new Router({ routes })`. For Vue 3, ensure you import `createRouter` and `createWebHistory` from `vue-router`, create the router instance, and then use `app.use(router)` after creating your app with `createApp`.","message":"While `vue-auto-routing` generates routes compatible with both Vue 2 and Vue 3, the application's Vue Router initialization and mounting process differs significantly between the two major Vue versions.","severity":"gotcha","affected_versions":">=1.0.0"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Ensure `VueAutoRoutingPlugin` is correctly installed and configured in your `webpack.config.js`. Verify that the `pages` option points to an existing directory. If you've specified an `output` option for the plugin, ensure your import path matches that output file.","cause":"This error typically means the `vue-auto-routing` virtual module (which represents the generated routes) is not being correctly resolved by Webpack. This can be due to an incorrect `VueAutoRoutingPlugin` configuration or missing aliases.","error":"Module not found: Error: Can't resolve 'vue-auto-routing' in '[path]'"},{"fix":"Verify that your `vue` and `vue-router` package versions are compatible. For Vue 3, always use `createRouter` and `createWebHistory` from `vue-router`, and mount your application using `createApp(App).use(router)`.","cause":"This usually indicates a fundamental mismatch in how Vue and Vue Router are being initialized, specifically trying to use a Vue 3 `createApp` method with a Vue 2 Router instance, or vice-versa.","error":"TypeError: (0 , vue_1.createApp)().use is not a function"},{"fix":"Provide a valid string path to your components directory (e.g., `'src/pages'`) for the `pages` option within the `VueAutoRoutingPlugin` configuration in your webpack setup.","cause":"The `pages` option in your `VueAutoRoutingPlugin` configuration is either missing, empty, or points to a non-existent or invalid directory. The plugin cannot find the components to generate routes from.","error":"Error: [VueAutoRoutingPlugin] 'pages' option must be a string path to a directory."}],"ecosystem":"npm"}