npm package discovery and stats viewer.

Discover Tips

  • General search

    [free text search, go nuts!]

  • Package details

    pkg:[package-name]

  • User packages

    @[username]

Sponsor

Optimize Toolset

I’ve always been into building performant and accessible sites, but lately I’ve been taking it extremely seriously. So much so that I’ve been building a tool to help me optimize and monitor the sites that I build to make sure that I’m making an attempt to offer the best experience to those who visit them. If you’re into performant, accessible and SEO friendly sites, you might like it too! You can check it out at Optimize Toolset.

About

Hi, 👋, I’m Ryan Hefner  and I built this site for me, and you! The goal of this site was to provide an easy way for me to check the stats on my npm packages, both for prioritizing issues and updates, and to give me a little kick in the pants to keep up on stuff.

As I was building it, I realized that I was actually using the tool to build the tool, and figured I might as well put this out there and hopefully others will find it to be a fast and useful way to search and browse npm packages as I have.

If you’re interested in other things I’m working on, follow me on Twitter or check out the open source projects I’ve been publishing on GitHub.

I am also working on a Twitter bot for this site to tweet the most popular, newest, random packages from npm. Please follow that account now and it will start sending out packages soon–ish.

Open Software & Tools

This site wouldn’t be possible without the immense generosity and tireless efforts from the people who make contributions to the world and share their work via open source initiatives. Thank you 🙏

© 2024 – Pkg Stats / Ryan Hefner

vue-cli-plugin-auto-routing

v1.3.0

Published

Vue CLI plugin that provides auto routing feature

Downloads

2,546

Readme

vue-cli-plugin-auto-routing

vue-cli-plugin-auto-routing Dev Token

Vue CLI plugin that provides auto routing feature.

Overview

Ensure you are in a project generated by Vue CLI >= v3. You install this plugin by running the following command:

# If you did not install router plugin yet
$ vue add router

# Install vue-cli-plugin-auto-routing
$ vue add auto-routing

After adding the plugin, the file structure will be the below.

src/
├── pages/
├── layouts/
└── router/

Pages

.vue files under the pages/ directory will be automatically resolved to generate routing. Vue Router routes options will be configured with the file structure under the pages/. The generated routing is same with Nuxt's routing.

Note that directories and files started and ended with __ (two underscores, e.g. __foo__.vue) will be ignored.

For example, when you have the following page components:

pages/
├── __partial__.vue
├── index.vue
├── users.vue
└── users/
    └── _id.vue

It is resolved to the below routes. Note that _ prefixed components generate dynamic routing.

export default [
  {
    name: 'index',
    path: '/',
    component: () => import('@/pages/index.vue')
  },
  {
    name: 'users',
    path: '/users',
    component: () => import('@/pages/users.vue'),
    children: [
      {
        name: 'users-id',
        path: ':id?',
        component: () => import('@/pages/users/_id.vue')
      }
    ]
  }
]

If you want to make route param required, create a directory for the param and add index.vue in the directory. In the above example, if you replace users/_id.vue with users/_id/index.vue, :id param will be required.

<route> custom block

If a page component has <route> custom block, the content json will be merged with route config.

For example, if index.vue has the following <route> block:

<route>
{
  "name": "home",
  "meta": {
    "requiresAuth": true
  }
}
</route>

<template>
  <h1>Hello</h1>
</template>

The generated route config is like the following:

module.exports = [
  {
    name: 'home',
    path: '/',
    component: () => import('@/pages/index.vue'),
    meta: {
      requiresAuth: true
    }
  }
]

Layouts

Components under the layouts/ directory will be used as shared layout component in the application. You can choose a layout by specifying layout component option in a page component. The default value of layout is 'default'. That means when you omit layout options, layouts/default.vue will be choosed as the layout component. This is the same concept with Nuxt's layouts.

For example, when you have layouts/foo.vue and pages/index.vue:

<!-- layouts/foo.vue -->
<template>
  <div>
    <h1>Foo Layout</h1>
    <router-view />
  </div>
</template>
<!-- pages/index.vue -->
<template>
  <p>index.vue</p>
</template>

<script>
export default {
  // You can specify layout component name here (default value is 'default')
  layout: 'foo'
}
</script>

The following html will be rendered:

<div>
  <h1>Foo Layout</h1>
  <p>index.vue</p>
</div>

Modifying Chunk Name

A chunk name from auto generated file can be conflicted with your code. You may see the below error log in that case:

 ERROR  Failed to compile with 1 errors
 error  in ./node_modules/vue-auto-routing/index.js
It's not allowed to load an initial chunk on demand. The chunk name "index" is already used by an entrypoint.
 ERROR  Build failed with errors.
error Command failed with exit code 1.

To avoid this error, you can set chunkNamePrefix option to change the auto generated chunk name.

// vue.config.js

module.exports = {
  pluginOptions: {
    autoRouting: {
      // Specify a prefix which will be added to all auto generated chunk name.
      chunkNamePrefix: 'page-'
    }
  }
}

Options

You can specify options for this plugin under pluginOptions.autoRouting in vue.config.js. The options are simply passed to vue-auto-routing options. You can see the available options list here.

// vue.config.js

module.exports = {
  pluginOptions: {
    autoRouting: {
      // Optionally specify a custom output file, relative to the project root
      outFile: "src/router/routes.js",
      // Specify other vue-auto-routing options here
      nested: false
    }
  }
}

Related Projects

License

MIT