Nuxt•2w ago

Cloudflare pages 404?

im in nuxt an i deploy with cloudflare pages. When i visit the site a 404 show up and i have to click 'go home' that uses router link to '/' to see the actual page. This is very odd because when i visit the same path 'myapp.com' or 'myapp.com/' the error 404. Despite this when i click 'go home' (set to go to the route '/' ) it shows the page. Doesnt make any sense

4 Replies

kapa.ai•2w ago

Hi @IsaacR943. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- Based on the information provided in the knowledge sources, it seems you're encountering an issue with 404 errors when deploying your Nuxt application to Cloudflare Pages. This is a known issue that can occur due to various reasons. Let's address this problem step by step: 1. First, ensure that you're using the correct Nitro preset for Cloudflare Pages. As mentioned in this GitHub issue, you should use:

   NITRO_PRESET=cloudflare_pages npx nuxt build

   NITRO_PRESET=cloudflare_pages npx nuxt build

2. In your nuxt.config.ts, add the following configuration:

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         crawlLinks: true,
         routes: ['/'],
       },
     },
   })

   export default defineNuxtConfig({
     nitro: {
       prerender: {
         crawlLinks: true,
         routes: ['/'],
       },
     },
   })

This will ensure that your home page is pre-rendered. 3. The 404 error you're seeing might be Cloudflare's default 404 page instead of your custom error page. To fix this, you need to make sure your custom error page is being generated and recognized by Cloudflare Pages. 4. Check if you have an error.vue file in the root of your project. If not, create one with a custom error component. Here's an example from the Nuxt UI documentation:

   <template>
     <UPageError :error="error" />
   </template>

   <script setup lang="ts">
   import type { NuxtError } from '#app'

   defineProps<{
     error: NuxtError
   }>()
   </script>

   <template>
     <UPageError :error="error" />
   </template>

   <script setup lang="ts">
   import type { NuxtError } from '#app'

   defineProps<{
     error: NuxtError
   }>()
   </script>

5. Make sure you're not using any Cloudflare settings that might interfere with your Nuxt application. As mentioned in the Nuxt deployment documentation, disable the following Cloudflare options: - Rocket Loader™ - Mirage - Email Address Obfuscation 6. If the issue persists, it might be related to how Cloudflare Pages handles routing for single-page applications. You may need to add a custom _routes.json file in your public directory to control which paths should be handled by your application. Here's an example:

   {
     "version": 1,
     "include": [
       "/*"
     ],
     "exclude": []
   }

   {
     "version": 1,
     "include": [
       "/*"
     ],
     "exclude": []
   }

This tells Cloudflare Pages to let your application handle all routes. If after implementing these steps you're still experiencing issues, it might be worth opening an issue on the Nuxt GitHub repository with a minimal reproduction of your problem. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•2w ago

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

Omnislash•2w ago

Hello Did you solve it ? If not , did you try with a hello world project to see if it's in the way you config/deploy or related to your project ? If you use github, you can just use the Nuxt preset and it will be auto deployed properly.

IsaacR943OP•2w ago

Yes. I did solve it. launch a new hello world application then copy paste everything That solved the issue. Havent face the same situation again tho«

Gaming

Programming

Cloudflare pages 404?

Did you find this page helpful?