Product
Introducing SSO
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
vue-cli-plugin-auto-routing
Advanced tools
Readme
Vue CLI plugin that provides auto routing feature.
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/
.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 blockIf 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
}
}
]
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>
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-'
}
}
}
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
}
}
}
MIT
FAQs
Vue CLI plugin that provides auto routing feature
The npm package vue-cli-plugin-auto-routing receives a total of 594 weekly downloads. As such, vue-cli-plugin-auto-routing popularity was classified as not popular.
We found that vue-cli-plugin-auto-routing demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Product
Streamline your login process and enhance security by enabling Single Sign-On (SSO) on the Socket platform, now available for all customers on the Enterprise plan, supporting 20+ identity providers.
Security News
Tea.xyz, a crypto project aimed at rewarding open source contributions, is once again facing backlash due to an influx of spam packages flooding public package registries.
Security News
As cyber threats become more autonomous, AI-powered defenses are crucial for businesses to stay ahead of attackers who can exploit software vulnerabilities at scale.