Registry / web-framework / vue-route-generator

vue-route-generator

library1.0.0jsnpmunverified

vue-route-generator is a utility library for generating Vue Router configuration arrays based on a file-system-driven page component structure, mirroring conventions seen in frameworks like Nuxt. It allows developers to define routes implicitly by organizing `.vue` files within a specified directory, eliminating the need for manual route array definitions. The current stable version is `1.0.0`, which introduced compatibility with Vue 3. While not on a fixed release cadence, it receives updates for bug fixes and feature enhancements, with major versions primarily driven by Vue ecosystem shifts. A key differentiator is its focus on generating static JavaScript code at build time, rather than performing runtime route resolution, and its support for custom route metadata embedded directly within Vue Single File Components via a `<route>` block. It serves as a lower-level tool compared to related projects like `vue-auto-routing`, offering more granular control over the generation process.

web-framework

npm install vue-route-generator

github ↗package ↗

INSTALL

IMPORT

SIG · VUE-ROUTE-GENERATO

vue-route-generator

web-frameworkjavascriptv1.0.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–226 runs

build_error

glibc

node 18–226 runs

build_error

Code

Verified usage

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

generateRoutes

✓ import { generateRoutes } from 'vue-route-generator'

✗ const generateRoutes = require('vue-route-generator')

While `require` is shown in examples, ESM imports are standard for modern Vue 3 projects. Both are supported.

GenerateConfig

✓ import type { GenerateConfig } from 'vue-route-generator'

TypeScript type for the configuration object used by `generateRoutes`.

GeneratedRoutes

✓ import routes from './path/to/generated/routes'

✗ import { routes } from './path/to/generated/routes'

The generated route file exports the routes array as a default export, not named.

This quickstart demonstrates how to use `generateRoutes` to create a Vue Router configuration string from a mock `pages` directory. It then prints the generated code to the console, showing the resulting route array with dynamic imports.

import { generateRoutes } from 'vue-route-generator'; import path from 'path'; import fs from 'fs'; // Create a dummy pages directory and files for demonstration const pagesDir = path.resolve(__dirname, 'temp_pages'); if (!fs.existsSync(pagesDir)) { fs.mkdirSync(pagesDir); } fs.writeFileSync(path.join(pagesDir, 'index.vue'), '<template><div>Home</div></template>'); fs.writeFileSync(path.join(pagesDir, 'about.vue'), '<template><div>About</div></template>'); const usersDir = path.join(pagesDir, 'users'); if (!fs.existsSync(usersDir)) { fs.mkdirSync(usersDir); } fs.writeFileSync(path.join(usersDir, '_id.vue'), '<template><div>User ID: {{ $route.params.id }}</div></template>'); // Generate the routes const generatedCode = generateRoutes({ pages: pagesDir, importPrefix: '@/temp_pages/' }); console.log('Generated Vue Router Configuration:\n'); console.log(generatedCode); // Clean up dummy directory fs.rmSync(pagesDir, { recursive: true, force: true });

Debug

Known issues

breakingVersion `1.0.0` introduces compatibility for Vue 3. While bug fixes and features are released in minor versions, upgrading to `1.0.0` when using Vue 2 may cause unexpected behavior or require adjustments due to underlying Vue ecosystem changes. Ensure your project is Vue 3 compatible before upgrading to `1.0.0`.

fix

For Vue 2 projects, remain on `0.x` versions. For Vue 3, update `vue-router` to its Vue 3 compatible version (v4) and ensure other Vue dependencies are aligned.

affects: >=1.0.0

gotchaRoute resolution logic, especially concerning optional parameters, index routes, and the omission of 'index' from paths/names, has undergone revisions in versions `0.3.x` through `0.5.x`. This can lead to unexpected routing paths or names if you're upgrading from much older versions or expect specific legacy behaviors.

fix

Thoroughly review generated routes after upgrading. Check the changelog for specific changes to routing behavior and adjust your file structure or `<route>` blocks as needed.

affects: >=0.3.0

gotchaThe `<route>` custom block, introduced in `v0.5.0`, allows embedding route metadata directly in SFCs. Improper JSON formatting within this block or conflicting properties with automatically generated route data can lead to incorrect router configurations.

fix

Ensure the content of the `<route>` block is valid JSON. Use it to *merge* additional properties or *override* default generated properties, understanding the precedence rules. Utilize editor extensions like Vetur with `"vetur.grammar.customBlocks": { "route": "json" }` for syntax validation.

affects: >=0.5.0

gotchaBy default, `dynamicImport` is `true`, generating routes that use `import()` for component loading. While efficient for chunking, it can lead to issues in environments that don't fully support dynamic imports or if your build setup isn't configured to handle them correctly (e.g., older Node.js versions or specific bundler configurations).

fix

If dynamic imports cause issues, set `dynamicImport: false` in the `generateRoutes` config. This will generate `require()` statements (or direct imports if ESM). Ensure your bundler supports the generated import syntax for your target environments.

affects: *

Errors

Common errors & fixes

Error: Cannot find module 'vue-route-generator'

The package is not installed or not resolvable in the current environment.

fix

Run `npm install vue-route-generator` or `yarn add vue-route-generator` in your project directory.

[Vue Router warn]: No match found for location: "/some/path"

The generated routes do not include a path matching the requested URL, likely due to an incorrect `pages` directory path or unexpected file naming conventions.

fix

Verify the `pages` option in `generateRoutes` points to the correct directory. Check file names and directory structure against Nuxt-style routing conventions (e.g., `_id.vue` for dynamic segments). Ensure no files are unintentionally ignored (e.g., those starting/ending with `__`).

Vue: Expected 'object' or 'array', got 'undefined' when importing routes

The generated route file is empty or exports an invalid format, often due to `generateRoutes` not producing any output or the output not being saved correctly.

fix

Check the output of `generateRoutes` (e.g., `console.log(generatedCode)`). Ensure `fs.writeFileSync` is correctly saving the output to the specified file and that the file is subsequently imported correctly as a default export.

Syntax highlighting not working for <route> block in .vue files (VS Code Vetur)

VS Code's Vetur extension does not recognize the custom `<route>` block by default.

fix

Add the following configuration to your VS Code `settings.json`: `"vetur.grammar.customBlocks": { "route": "json" }` to enable JSON syntax highlighting within the `<route>` block.

Upgrade

Version history

1.0.0latest on npm

Audit

Dependencies

No dependency data recorded yet.

Agent activity

10 hits · last 30 days

node

Amazon

OpenAI (training)

Resources

githubhttps://github.com/ktsn/vue-route-generator ↗

packagehttps://www.npmjs.com/package/vue-route-generator ↗