Nuxt.js static site and 404 page

Question

I have currently created a pages/404.vue file, then, in my server settings, I redirect any non existent url to /404.html (the generated page).

Apart me having to declare the file extension (it gives me redirect error if I redirect to /404), it seems to work fine, and I guess it will also give me an easy way to create other server error files, if needed.

However, following the documentation, I first tried adding fallback: true inside generate:{ }. This creates a 404.html page in my root, but using a default Nuxt layout (an infinite loading wheel page).

I assumed that creating layouts/error.vue (as per docs) would do the trick, but didn't seem the case.

What is the right practice, and, if the documentation one is to follow, why my personalised error.vue wasn't working? Thanks.

Braque

Any news on this? – Digit

Answer 1

No answers received.

I removed the pages/404.vue in the end and created it as layouts/error.vue

error.vue was giving me erros related to default.vue, for some reasons, so I created a layouts/basic.vue layout as an (almost) empty container for error.vue.

The error page now works during dev and during the new nuxt start local testing on full static site (since nuxt 2.13), but still not on the live site, which I will check if related to server settings.

the above goes together with generate: { fallback: true } in nuxt.config.js (which creates the 404.html page)

Braque

do you have an update on this? I'm using AWS Amplify and it specifically ask for an actual 404 page/path. Should I go with having an actual 404.vue page? – Interrupt

no, if you are using target: static, then you want to add generate { fallback: true } in nuxt.config.js and the actual page in layouts/error.vue , then you need to redirect the errors in the server to the 404.html generated file – Braque

Answer 2

In order to generate a 404 fallback page in nuxt.js you need to first set the generate option in your nuxt.config.js like this generate: { fallback: '404.html' }

Then you need to create a new layout called error.vue in your layouts directory

layouts/error.vue

After you have done this you can nuxt generate followed by nuxt start to run your project with a fallback page for the 404 error.

Stopper

Answer 3

NUXT 3 Update 2023:

If you are using Nuxt 3, add error.vue to the root directory, NOT into /pages or /layouts

// /error.vue
<template>
    <div class="flex flex-col items-center">
            <div class="text-indigo-500 font-bold text-7xl">
                404
            </div>

            <div class="font-bold text-3xl xl:text-7xl lg:text-6xl md:text-5xl mt-10">
                This page does not exist
            </div>

            <div class="text-gray-400 font-medium text-sm md:text-xl lg:text-2xl mt-8">
                The page you are looking for could not be found.
            </div>
    </div>
</template>

Trona

Answer 4

To create a 404 page, it is enough to create two new layouts with the names error.vue and empty.vue in the layouts folder.

If you want your 404 page to have a different structure from the project, use layout:"empty", otherwise you can use the same layout:"default".

see my codes...

// layouts/error.vue
<template>
  <div>
    <h1 v-if="error.statusCode === 404">Page not found</h1>
    <h1 v-else>An error occurred</h1>
    <NuxtLink to="/">Home page</NuxtLink>
  </div>
</template>

<script>
export default {
  name: 'error',
  layout: 'empty', //OR layout:'default'
  props: {
    error: {
      type: Object,
    },
  },
};
</script>

And empty layout with custom structure can be as follows:

// layouts/empty.vue
<template>
   //your codes
   <Nuxt />
</template>

Johns