Directory Structure
All named parallel routes page files should be placed in the ~/pages/ directory. Nuxt Pages Plus will process these files and generate parallel routes after Nuxt has generated the routes.
Named Parallel Routes
You can place your parallel routes pages directory file with {route}@{name} format.
| File Path | Name | Generated route | Description |
|---|---|---|---|
index@foo.vue | foo | / | name in index file |
@foo/index.vue | foo | / | name in root folder |
@foo.vue | foo | / | name in root folder without index |
about/us@foo.vue | foo | /about/us | name in file of folder |
about/us@foo/contact.vue | foo | /about/us/contact | name in sub folder |
Nested Named Parallel Routes
Nuxt Pages Plus supports nested name file-based routing, which can be used in nested named parallel routes.
| File Path | Name | Generated route | Description |
|---|---|---|---|
@foo/@bar/about.vue | foo/bar | /about | nested name |
about@foo/us@bar.vue | foo/bar | /about/us | nested name in file and folder |
@foo@bar/about.vue | foo/bar | /about | multiple nested name in folder |
about/us@foo@bar.vue | foo/bar | /about/us | multiple nested name in file |
Escape @ separator
Supporting named parallel views could lead to conflicts with certain routes, e.g. including the @ symbol in the route. Nuxt Pages Plus provided some options to address this problem.
Customize separator symbol
This allows you to use index+foo.vue as Parallel Routes. (Example)
nuxt.config.ts
export default defineNuxtConfig({
pagesPlus: {
separator: '+',
},
})