CODEWITHSUNDEEP
javascriptwebpacknuxt.js
Fabio Zanchi
Fabio Zanchi

Reputation: 945

Custom 404 Page using Nuxt generate working only in dev mode

I have an error.vue page inside the layouts folder.

When I'm on development mode accessing the site throughout localhost, if I reach a page with the wrong name the 404 page shows up but when I'm in production I can't see that page. Instead, another page appears:

enter image description here

Here is the code:

<template>
  <v-app>
    <v-container>
      <v-layout row wrap align-center justify-center fill-height>
        <v-flex xs12 sm12 md6>
          <v-img
            :src="require('@/assets/images/404.svg')"
            width="90%"
          ></v-img>
        </v-flex>
        <v-flex xs12 sm12 md6 class="mb-5">
          <h1 class="display-4 light-grey font-weight-medium text-xs-center text-sm-center text-md-left mb-3">Oops!</h1>
          <h1 class="display-3 light-grey font-weight-medium text-xs-center text-sm-center text-md-left">The page you are looking for is not found.</h1>
        </v-flex>
      </v-layout>
    </v-container>
  </v-app>
</template>

<script>
export default {
  props: ['error'],
  data() {
    return {
    }
  }
}
</script>

<style scoped>
  .light-grey{
    color: #4f4f4f;
  }
</style>

Nuxt version: 2.8.1

Following this https://nuxtjs.org/guide/views/

Am I missing something?

Upvotes: 4

Views: 6883

Answers (1)

DreaMinder
DreaMinder

Reputation: 653

Are you using nuxt generate mode? In this case, you forgot to set up your static server (looks like ISS?) to serve 200.html fallback-file if requested page wasn't found. https://nuxtjs.org/api/configuration-generate#fallback

If you are using nuxt universal mode, your proxy server tuned to intercept errors and show own page instead of nuxt error page.

Upvotes: 3

Related Questions