Nuxt•4mo ago

Prerender static 404 page

Is there any way to prerender a static 404 page instead of it being an SPA fallback in Nuxt 3?

3 Replies

Hi @Joey. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Yes, there is a way to prerender a static 404 page in Nuxt 3 instead of using an SPA fallback. Here's how you can achieve this: 1. Create an error.vue file in the root of your Nuxt project. This file will serve as your custom error page, including 404 errors Docs > Guide > Directory-structure > error.vue (https://nuxt.com/docs/guide/directory-structure/error). 2. In your nuxt.config.ts file, add the following configuration to enable prerendering of the error page:

export default defineNuxtConfig({
  hooks: {
    'prerender:routes' ({ routes }) {
      routes.add('/404.html')
    }
  },
})

export default defineNuxtConfig({
  hooks: {
    'prerender:routes' ({ routes }) {
      routes.add('/404.html')
    }
  },
})

This configuration tells Nuxt to prerender a /404.html page during the build process Docs > Guide > Concepts > Rendering Modes > Universal Rendering Part 5 (https://nuxt.com/docs/guide/concepts/rendering#universal-rendering). 3. Make sure your hosting provider is configured to serve the /404.html file for any 404 errors. This step may vary depending on your hosting service. By following these steps, you'll have a prerendered static 404 page instead of relying on an SPA fallback. This approach can provide better performance and SEO benefits compared to client-side rendering of the 404 page. Remember that the exact behavior might depend on your hosting provider and deployment settings. Some providers may require additional configuration to properly serve the static 404 page. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4mo ago

<@699655702314221588> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

JoeyOP•4mo ago

@kapa.ai 404.html is statically generated now, but still acts as an SPA. I basically want the Pinia store to always be prefilled, also when users land on a page that is not statically generated.

Gaming

Programming

Prerender static 404 page

Did you find this page helpful?