[Fixed] error while deploying nuxt 3 in pre-rendered mode – Vue.js

The Problem:

While deploying a Nuxt 3 application in pre-rendered (SSG) mode, an error occurs: [404] Page not found: /http://localhost:8000. Despite having a 404 page defined at /pages/404.vue, the error persists. The user has tried creating a new project and adding the same configuration, but the issue remains. The user seeks assistance in resolving this problem.

The Solutions:

Solution 1: Handle Backend Throttling

The error arose due to throttling in the Laravel backend API. Throttling limits the number of requests allowed within a specific time frame. In this case, the API was sending 404 and 429 errors when the request rate exceeded the limit.

To resolve the issue, comment out the throttling lines in the Laravel API. This will remove the request limit, allowing the frontend to make multiple requests without encountering throttling errors.

Solution 2: Enable Prerender Error Handling

To handle the Prerender errors, update the prerender object in nuxt.config.ts by adding failOnError: false. This will allow the build to continue despite prerendering errors.

export default defineNuxtConfig({
  // ...existing config
  nitro: {
    // ...existing config
    prerender: {
      crawlLinks: true,
      failOnError: false, // Enable error handling
    },
  },
});

This solution essentially ignores prerendering errors and allows the build to complete, even if there are issues with prerendering specific routes. However, it’s important to address the underlying causes of the errors to ensure optimal performance and user experience.

Video Explanation:

The following video, titled "Build an Animated Responsive Sidebar Menu with Vue JS, Vue ...", provides additional insights and in-depth exploration related to the topics discussed in this post.

Learn how to build an animated responsive side navigation bar with a menu using Vue JS, Vue Router and SCSS as our CSS pre-processor.