Add 404 Page For NuxtJS on Netlify

I had read somewhere that in order to get a 404 page working with Netlify you just needed to add an error.vue file into your layouts folder. I thought this was working properly, but it turns out it actually wasn’t. I was still getting sent to the default Nelify 404 page which doesn’t match the rest of my site.

Solving it was a piece of cake though. All I needed to do was add a 404.vue page template. Then inside of that, I added some simple code.

<template>
    <section class="container">
        <h1>Seems you are looking for something that doesn't exist. Sorry!</h1>
        <p>
            <NuxtLink to="/">Return Home</NuxtLink>
        </p>
    </section>
</template>

<style scoped>
    p {
        margin: 2rem 0;
    }
</style>

I ended up removing the error layout file too and everything still seems to work fine. The last part of this is to add a line of code into your nuxt.config.js to set an option for generate:

export default {
    generate: {
        fallback: true
    }
}

Now you just have to push your changes and do a test. That’s all there is to it!

Add 404 Page For NuxtJS on Netlify

Resources