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.

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

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

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!