How to add custom static 404 error page in Nuxt ?

In this article, we will learn how to add custom static 404 error page in nuxt application.

A 404 Error is a status code which occurs when a page is not found in the server.

The 404 Error page are the fallback page which is shown when a content in a website is not found or the content has been moved to other place.

Add static 404 Error Page in Nuxt.

To add a 404 Error page in nuxt follow the steps below.

Step 1: Create a new layout error.vue in your layouts folder in nuxt. Add you html code as you need inside the the error.vue page.

layouts/error.vue

Step 2: Now addgenerate: { fallback: '404.html' } in your nuxt.config.js file.

export default {
  generate: { fallback: '404.html' },
}

Step 3: After you have done the above two steps, run npm generate and the npm start . Now visit any random page which is not present in your site, you will get the 404 error page.

Note: In development environment you will not get the error page, to check you to npm generate and then npm run or you can just deploy the site to check.

That's it, now you have successfully added a 404 error page in your static site.

If you want more NuxtJS related article, Read Here .

Related Topics:

Add Robots.txt in your Nuxtjs Application

Add Google Analytics in Nuxt Application

Generate sitemap for dynamic routes in nuxtjs application