# vite-plugin-pages

Automate generate route config for Vue components in pages directory, and support layouts in the same time.

  • component which name starts with _ is dynamic page
  • component which name starts with $ is nested route
  • component which name is _ will catch the error page
  • default layout will be applied to every Vue component in pages direcotry
  • custom layout will only be applied to Vue component has set layout property in layout block

# Installation

# Use npm

npm install @originjs/vite-plugin-pages --save-dev

# Use yarn

yarn add @originjs/vite-plugin-pages --dev

# Usage

First, add @originjs/vite-plugin-pages in vite.config.js.

// vite.config.js
import pages from '@originjs/vite-plugin-pages'

export default {
    plugins: [
            /* options */

Then import the routes generated from vite-plugin-pages, and create router instance with the routes:

import { createRouter, createWebHistory } from 'vue-router'
import routes from 'virtual:plugin-pages'


const router = createRouter({
  history: createWebHistory(),

export default router

now we could write our pages and layouts in pages directory and layouts directory respectively.

# Convert rules

See these examples:

  1. Normal file name: /user/foo.vue -> /user/foo
  2. File name starts with _: /user/_id.vue -> /user/:id
  3. File name is index.vue: /user/index.vue -> /user
  4. File name is _: /_.vue -> /:pathMatch(.*)*

# Others

  1. The name of files and directories in same directory must be different. For example, if we already have /user/, we can't add a user.vue file.
  2. Directory can not be index.