File based router

Generate routes from a directory of Vue files.

Usage

This plugin based on unplugin
So you can use it with Vite, Rollup, Webpack, esbuild, nuxt
Like in Vite

1import { defineConfig } from 'vite'
2import Router from 'unplugin-vue-file-router/vite'
3
4export default defineConfig({
5  plugins: [
6    Router({ /* options */ })
7  ]
8})

Rules

Assuming you have a directory structure like this:

src/views/
  index.vue
  about.vue
  users/
    [id].vue
    index.vue
  a/
    index.vue
    a-1.vue
    a-2.vue

The following dirs will generate the following routes:

1export const routes = [{
2  name: '',
3  path: '/',
4  component: () => import('/src/views/index.vue'),
5  children: [
6    {
7      name: '/about',
8      path: '/about',
9      component: () => import('/src/views/about.vue')
10    },
11    {
12      name: '/a',
13      path: '/a',
14      component: () => import('/src/views/a/index.vue'),
15      children: [
16        {
17          name: '/a/a-1',
18          path: '/a/a-1',
19          component: () => import('/src/views/a/a-1.vue')
20        },
21        {
22          name: '/a/a-2',
23          path: '/a/a-2',
24          component: () => import('/src/views/a/a-2.vue')
25        }
26      ]
27    },
28    {
29      name: '/users',
30      path: '/users',
31      component: () => import('/src/views/users/index.vue'),
32      children: [
33        {
34          name: '/users/:id',
35          path: '/users/:id',
36          component: () => import('/src/views/users/[id].vue')
37        }]
38    }]
39}]

You can import it in any js file like this:

1import { routes } from 'virtual:file-router'

Options

1interface Options {
2  /**
3   * base url
4   * @default 'views'
5   */
6  pageDir?: string
7  /**
8   * extensions of files to be imported
9   * @default /.(vue|[t|j]sx*)$/ for vue, ts, js, tsx, jsx
10   */
11  extensions?: MaybeArray<RegExp>
12  /**
13   * match route resolvers
14   * @default [{
15      rule: (filename: string) => filename.startsWith('[') && filename.endsWith(']'),
16      resolver: (filename: string) => `:${filename.slice(1, -1)}`,
17    }],
18   * default will resolve [id] into :id
19   */
20  matchRoute?: MaybeArray<MatchRouteHandler>
21}
22
23type MaybeArray<T> = T | T[]
24
25interface MatchRouteHandler {
26  /**
27   * select which file to match this rule
28   */
29  rule: (filename: string) => boolean
30  /**
31   * resolve filename and return route path
32   */
33  resolver: (filename: string) => string
34}

TypeScript

To get TypeScript support, you can add this to your env.d.ts or any .d.ts file which has been included in tsconfig.json:

1/// <reference types="unplugin-vue-file-router/module" />