Why does my Nuxt application redirect to my hosting provider's 404 page and not my custom error.vue page?

Question

I have a created my personal online portfolio using Nuxt 3 and when I intentionally enter an invalid URL in the development environment, my custom 404 page is displayed. However, after deploying my website, when I intentionally key-in a non-existent page to my URL, it displays my hosting provider's 404 page.

Development environment:

After deploying:

The following code is my error.vue file in the ROOT section of my application:

<script setup>
     const error = useError();

     const statusCode = error.value.statusCode;

     if (statusCode === 404 || statusCode === '404') {
         error.value.message = "Whoops! The page you're looking for doesn't exist. Might I suggest we go back home..."
     }
 </script>

 <template>
     <NuxtLayout name="404">
         <section class="error-section">
             <div class="error-block">
                 <h1>{{ statusCode }}</h1>
                 <p>{{ error.message }}</p>
             </div>

             <RouterLink class="btn btn-primary" to="/" aria-label="click to go back to the home page">Go back home</RouterLink>
         </section>
     </NuxtLayout>
</template>

I tried the following code in my app.vue in hopes that I will be directed to the custom error page if a 404 occurred. However, the following code prevented me from building the app altogether.

<script setup>
     import { useError } from '#app'

     const error = useError()

     if (error.statusCode) {
         return <error.vue />
     }
</script>

According to some previous questions asked which are similar, I tried adding the following code in my nuxt.config file:

generate: {
     fallback: true
},

Answer 1

I had the same problem with the same hosting company Hostinger and same framework Nuxt 3, and I tried many solutions from the internet and they did not work. However, I tried changing the 404 page from the hosting control panel itself, and put an empty HTML page and it worked successfully!

My solution steps:

1. Open Hostinger website dashboard.

2. Choose website > Error Pages

3. Choose your desired error page [I choosed 404] and click edit button

4. Select Edit HTML option and just enter an empty html code like in screenshot below and click save button.