Custom Routes

Custom routes are routes that are not defined in Drupal. They are defined in the frontend and can be used to render custom pages.

Defining frontend routes

In the frontend, the Drupal routing is managed by the wildcard pages/[...slug].vue file within the pages directory.

In order to create a custom route in the frontend:

1. Go to the pages directory.
2. Create a new file with the desired route name. For instance, if you want a route named search, create a file called search.vue.

Relation to Drupal routes

In your Nuxt.js application, the routing mechanism runs in the following order:

1. Nuxt.js Routing: It attempts to align the navigated path with one of the predefined routes located in your pages directory.
2. Dynamic Route Fallback: If no predefined routes match, the system defaults to a wildcard route. This is represented by the [...slug].vue dynamic route, which serves as the fallback.

Fallback routes

In the event that no matching route is found, by default, error pages provided by Drupal (e.g. 403, 404 page) are shown, while keeping the right status code.

Nuxt routing documentation

For more information on routing in Nuxt.js, see the Nuxt routing documentation.