Router Setup ​

By default, routes are loaded from the <project-root>/pages folder, where <project-root> refers to the root setting in your Vite configuration file.

The route paths are dynamically inferred from the directory structure, very much like Nuxt.js, and passed to the Vue Router instance in /:create.js

Alternatively, you can also export a path constant from your route modules, in which case it will be used to override the dynamically inferred paths:

<template>
  <p>Route with path export</p>
</template>

<script>
export const path = '/my-page'
</script>

<template>
  <p>Route with path export</p>
</template>

<script>
export const path = '/my-page'
</script>

Routes location ​

You can also change the glob pattern used to determine where to route modules from. Internally, this setting is passed to Vite's glob importer.

In your Vite configuration file:

import viteFastifyVue from '@fastify/vue/plugin'

export default {
  plugins: [
    // ...
    viteFastifyVue({ globPattern: '/views/**/*.vue' }),
  ]
}

import viteFastifyVue from '@fastify/vue/plugin'

export default {
  plugins: [
    // ...
    viteFastifyVue({ globPattern: '/views/**/*.vue' }),
  ]
}

Dynamic parameters ​

Dynamic route parameters follow the Next.js convention ([param]), but that can be overriden by using the paramPattern plugin option. For example, this configuration switches the param pattern to the Remix convention ($param).

In your Vite configuration file:

import viteFastifyVue from '@fastify/vue/plugin'

export default {
  plugins: [
    // ...
    viteFastifyVue({ paramPattern: /\$(\w+)/ }),
  ],
}

import viteFastifyVue from '@fastify/vue/plugin'

export default {
  plugins: [
    // ...
    viteFastifyVue({ paramPattern: /\$(\w+)/ }),
  ],
}