Vue Auto Routing

Common errors

• Module not found: Error: Can't resolve 'vue-auto-routing' in '[path]'

  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.
  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.

• TypeError: (0 , vue_1.createApp)().use is not a function

  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.
  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)`.

• Error: [VueAutoRoutingPlugin] 'pages' option must be a string path to a directory.

  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.
  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.

Warnings

• breaking 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.
  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>`.
• breaking 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`.
  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.
• gotcha 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.
  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`.

Install

• npm install vue-auto-routing npm
• yarn add vue-auto-routing yarn
• pnpm add vue-auto-routing pnpm

Imports

• routes
  wrong:

  const routes = require('vue-auto-routing');

  correct:

  import routes from 'vue-auto-routing';

  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.
• VueAutoRoutingPlugin
  wrong:

  import { VueAutoRoutingPlugin } from 'vue-auto-routing/lib/webpack-plugin';

  correct:

  import VueAutoRoutingPlugin from 'vue-auto-routing/lib/webpack-plugin';

  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');`

Quickstart

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.

import { createApp } from 'vue';
import { createRouter, createWebHistory } from 'vue-router';
import App from './App.vue';

// This 'routes' import is a virtual module provided by vue-auto-routing's Webpack plugin.
// It dynamically contains the generated route configurations based on your 'pages' directory.
import routes from 'vue-auto-routing';

// 1. Configure Vue Router with the automatically generated routes (for Vue 3)
const router = createRouter({
  history: createWebHistory(),
  routes,
});

// 2. Mount your Vue 3 application
createApp(App).use(router).mount('#app');

// --- webpack.config.js (or vue.config.js if using Vue CLI) ---
const VueAutoRoutingPlugin = require('vue-auto-routing/lib/webpack-plugin');
const path = require('path');

module.exports = {
  // ... other webpack configurations ...
  plugins: [
    new VueAutoRoutingPlugin({
      pages: path.resolve(__dirname, 'src/pages'), // REQUIRED: Path to your page components directory
      importPrefix: '@/pages/', // OPTIONAL: Prefix for importing components in generated routes (e.g., '@/pages/Home.vue')
      // output: 'src/router/generated-routes.js', // OPTIONAL: Specify a physical output file for inspection or explicit import
    }),
  ],
  resolve: {
    alias: {
      '@': path.resolve(__dirname, 'src'), // Ensure '@' alias is configured if used in importPrefix
    },
  },
};

/* Example: src/pages/About.vue
<template>
  <div>About Page</div>
</template>

<route>
{
  "meta": {
    "title": "About Us"
  }
}
</route>
*/