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.
npm install vue-auto-routingVerified import paths — ran on the pinned version, not inferred.
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.
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>`.Update any hardcoded route names used for programmatic navigation (e.g., `router.push({ name: 'users-index' })`) or component lookups to remove the `-index` suffix.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`.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.
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)`.
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.