vue-router-invoke-next-webpack-plugin

Automatic generate routes of vue-router based on the directory, both supported vue2.x or vue3.x

Usage

Download

yarn add vue-router-invoke-next-webpack-plugin@alpha -D

Options

| Options | Type | Required | Default | Description | | -------- | :--------------: | :------: | :--------------: | --------------------------------------------------: | | root | String | true | '' | the directory which should be watched and generated | | alias | String | false | 'Invoke' | the root directory's alias | | version | String or Number | false | 3 | vue version 2 or 3 | | language | String | false | 'typescript' | typescript or javascript | | mode | String | false | 'history' | hash or history | | dist | String | false | {root}/.invoke | the output directory of generatic route |

Using In Webpack

webpack.config.js

const Invoke = require('vue-router-invoke-next-webpack-plugin');

module.exports = {
  // omit some options
  mode: ...,
  entry: ...,

  // you [must] set alias path the same as Invoke's Root Option
  resolve: {
    alias: {
      'Invoke': ROOT
    }
  }

  // use plugins
  plugins: [
    new Invoke({
      // should be the same as resolve.alias.Invoke
      root: ROOT
    })
  ]
}

Also you need make sure the value of process.env.NODE_ENV is equal to development or production in diffrent enviroment

Using In VueCli

vue.config.js

const Invoke = require('vue-router-invoke-next-webpack-plugin');
const path = require('path');

module.exports = {
  // omit other options...
  configureWebpack(config) {
    // you [must] set alias path the same as Invoke's Root Option
    config.resolve.alias.Invoke = path.resolve(process.cwd(), 'src/views');
    config.plugins.push(
      new Invoke({
        // should be the same as resolve.alias.Invoke
        root: path.resolve(process.cwd(), 'src/views')
      })
    );
  }
};

// or another way..

module.exports = {
  // omit other options...
  configureWebpack: {
    resolve: {
      alias: {
        // you [must] set alias path the same as Invoke's Root Option
        Invoke: path.resolve(process.cwd(), 'src/views')
      }
    },
    plugins: [
      new Invoke({
        // should be the same as resolve.alias.Invoke
        root: path.resolve(process.cwd(), 'src/views')
      })
    ]
  }
};

Using With Typescript

{
  "compilerOptions": {
    "baseUrl": ".",
    "paths": {
      "Invoke/*": ["views/*"]
    }
  }
}

you may need add baseUrl and paths for friendly check

What Is The Root Option

The ROOT option which means the aim directory to be watched, for an example

src
├── app.vue
├── main.js
└── views
    ├── index.vue
    ├── shop
    │   └── index.vue
    └── user
        └── index.vue

path.resolve(process.cwd(), 'src/views') should be the root path which be watched to generate routes for vue-router

How to Generate Routes

We split routes into Single Dynamic and Nested route

The below examples depends on the same options

webpack.config.js

const Invoke = require('vue-router-invoke-next-webpack-plugin');
const path = require('path');

module.exports = {
  // omit some options
  mode: ...,
  entry: ...,

  // you [must] set alias path the same as Invoke's root option
  resolve: {
    alias: {
      'Invoke': path.resolve(process.cwd(), 'src/views')
    }
  }

  plugins:[
    new Invoke({
      // should be the same as resolve.alias.Invoke
      root: path.resolve(process.cwd(), 'src/views')
    })
  ]
}

Single

A directory which has a file called index.vue(no sensitive to capital and small letter) can be translated to single route

src
├── app.vue
├── main.js
└── views
    ├── index.vue
    ├── shop
    │   ├── index.vue
    │   └── star
    │       └── index.vue
    └── user
        └── index.vue

The routes will be auto generated to the file src/views/.invoke/router.js

You can change the default output directory which is ${root}/.invoke by using the dist option

src/views/.invoke/router.js

import { createRouter, createWebHistory } from 'vue-router';

export const routerHistory = createWebHistory();
export const router = createRouter({
  history: routerHistory,

  routes: [
    {
      name: 'index',
      path: '/',
      component: () => import('Invoke/index.vue')
    },
    {
      name: 'shop',
      path: '/shop',
      component: () => import('Invoke/shop/index.vue')
    },
    {
      name: 'shop-star',
      path: '/shop/star',
      component: () => import('Invoke/shop/star/index.vue')
    },
    {
      name: 'user',
      path: '/user',
      component: () => import('Invoke/user/index.vue')
    }
  ]
});

Dynamic

A directory which start with _ and has a file which called index.vue can be translated to dynamic route

src
├── app.vue
├── main.js
└── views
    ├── _user
    │   └── index.vue
    ├── index.vue
    └── shop
        ├── _star
        │   └── index.vue
        └── index.vue

src/views/.invoke/router.js

import { createRouter, createWebHistory } from 'vue-router';

export const routerHistory = createWebHistory();
export const router = createRouter({
  history: routerHistory,

  routes: [
    {
      name: 'index',
      path: '/',
      component: () => import('Invoke/index.vue')
    },
    {
      name: 'user',
      path: '/:user',
      component: () => import('Invoke/_user/index.vue')
    },
    {
      name: 'shop',
      path: '/shop',
      component: () => import('Invoke/shop/index.vue')
    },
    {
      name: 'shop-star',
      path: '/shop/:star',
      component: () => import('Invoke/shop/_star/index.vue')
    }
  ]
});

Nested

A directory has the same name as its first file will be translated to nested route

src
├── app.vue
├── main.js
└── views
    ├── index.vue
    └── nest
        ├── child
        │   └── index.vue
        ├── inner
        │   └── index.vue
        └── nest.vue

src/views/.invoke/router.js

import { createRouter, createWebHistory } from 'vue-router';

export const routerHistory = createWebHistory();
export const router = createRouter({
  history: routerHistory,

  routes: [
    {
      name: 'index',
      path: '/',
      component: () => import('Invoke/index.vue')
    },
    {
      name: 'nest',
      path: '/nest',
      component: () => import('Invoke/nest/nest.vue'),

      children: [
        {
          name: 'nest-child',
          path: 'child',
          component: () => import('Invoke/nest/child/index.vue')
        },
        {
          name: 'nest-inner',
          path: 'inner',
          component: () => import('Invoke/nest/inner/index.vue')
        }
      ]
    }
  ]
});

Route Options

route options just like meta redirect you can set by using route.yml

src
├── app.vue
├── main.js
└── views
    ├── index.vue
    └── single
        ├── index.vue
        └── route.yml

route.yml

meta:
  number: 123
  string: 'string'
  boolean: true

redirect: '/test'

src/views/.invoke/router.js

import { createRouter, createWebHistory } from 'vue-router';

export const routerHistory = createWebHistory();
export const router = createRouter({
  history: routerHistory,

  routes: [
    {
      name: 'index',
      path: '/',
      component: () => import('Invoke/index.vue')
    },
    {
      name: 'single',
      path: '/single',
      component: () => import('Invoke/single/index.vue'),

      meta: {
        number: 123,
        string: 'string',
        boolean: true
      },

      redirect: '/test'
    }
  ]
});

Router Options

options of vue-router you can set it by Invoke Options

webpack.config.js

const Invoke = require('vue-router-invoke-next-webpack-plugin');
const path = require('path');

module.exports = {
  // omit some options
  mode: ...,
  entry: ...,

  // you [must] set alias path the same as Invoke's root option
  resolve: {
    alias: {
      'Invoke': path.resolve(process.cwd(), 'src/views')
    }
  }

  plugins: [
    new Invoke({
      // should be the same as resolve.alias.Invoke
      root: path.resolve(process.cwd(), 'src/views'),
      scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
          return savedPosition;
        } else {
          return { left: 0, top: 0 };
        }
      },
    })
  ]
}

src
├── app.vue
├── main.js
└── views
    └── index.vue

src/views/.invoke/router.js

import { createRouter, createWebHistory } from 'vue-router';

export const routerHistory = createWebHistory();
export const router = createRouter({
  history: routerHistory,
  routes: [
    {
      name: 'index',
      path: '/',
      component: () => import('Invoke/index.vue')
    }
  ],
  scrollBehavior: function scrollBehavior(to, from, savedPosition) {
    if (savedPosition) {
      return savedPosition;
    } else {
      return {
        left: 0,
        top: 0
      };
    }
  }
});

Change Default Alias

If you want to change default alias Invoke you can use the option called alias

webpack.config.js

const Invoke = require('vue-router-invoke-next-webpack-plugin');
const path = require('path');

module.exports = {
  // omit some options
  mode: ...,
  entry: ...,

  resolve: {
    alias: {
      '@': path.resolve(process.cwd(), 'src/views')
    }
  }

  plugins:[
    new Invoke({
      // should be the same as resolve.alias.@
      root: path.resolve(process.cwd(), 'src/views'),
      // change default alias
      alias: '@',
      scrollBehavior(to, from, savedPosition) {
        if (savedPosition) {
          return savedPosition;
        } else {
          return { left: 0, top: 0 };
        }
      },
    })
  ]
}

src
├── app.vue
├── main.js
└── views
    └── index.vue

src/views/.invoke/router.js

import { createRouter, createWebHistory } from 'vue-router';

export const routerHistory = createWebHistory();
export const router = createRouter({
  history: routerHistory,
  routes: [
    {
      name: 'index',
      path: '/',
      // has changed default alias
      component: () => import('@/index.vue')
    }
  ]
});