Handling unknown routes with _.vue files

Besides throwing a general 404 page with the validate method, you can use a _.vue file to throw a custom error page. Let's explore how this works with the following steps:

1. Create an empty _.vue file in the /pages/ directory, as follows:

pages/
--| _.vue
--| index.vue
--| users.vue
--| users/
-----| _id.vue
-----| index.vue

2. Add any custom content to this _.vue file, as follows:

// pages/_.vue
<template>
  <div>
    <h1>Not found</h1>
    <p>Sorry, the page you are looking for is not found.</p>
  </div>
</template>

3. Launch the app and navigate to the following routes, and you will see that Nuxt will call this _.vue file to handle these requests on any levels that do not match the correct routes:

/company
/company/careers
/company/careers/london
/users/category/subject
/users/category/subject/type

4. If you want to throw a more specific 404 page on a specific level – for example, in the /users route only...