Custom Routes

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

Routing overview

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

1. Nuxt Routing: It attempts to align the navigated path with one of the predefined routes located in your pages directory.
2. Nuxt Route Fallback: If no predefined routes match, the system defaults to the wildcard route pages/[...slug].vue. This wildcard route forwards requests to Drupal, such that the regular Drupal routing can handle the request.

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.

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

Handling route misses

In the event that no matching route is found by Drupal, by default, error pages provided by Drupal (e.g. 403, 404 page) are shown, while keeping the right status code. However, it's possible to take-over error handling in Nuxt as well. Please refer to the error handling topic.