[nuxt] Cannot load payload /_payload.json
I just created a brand new Nuxt project using
npx nuxi@latest init
. I set up routing by adding <NuxtPage />
to app.vue
and creating pages/index.vue
. Then I made a static export using npm run generate
and finally I serve it using npx serve .output/public
.
I am getting the following error in my browser's console:
Why is Nuxt is trying to load a non-existent JSON file? Did I find a bug already? π¬10 Replies
Works fine using Nuxt 3.6.1. Possibly related to this: https://github.com/nuxt/nuxt/pull/21860
GitHub
fix(nuxt): ensure static presets equivalent to
nuxi generate
by d...π Linked issue
resolves #21254
β Type of change
π Documentation (updates to the documentation or readme)
π Bug fix (a non-breaking change that fixes an issue)
π Enhancement (improving an existi...
@danielroe ^ I am going to bed now so hopefully you don't mind me just tagging you instead of replying to the PR or making an issue π
I was about to open an issue but someone else already did: https://github.com/nuxt/nuxt/issues/22068
GitHub
[nuxt] Cannot load payload /_payload.json Β· Issue #22068 Β· nuxt/nu...
Environment Operating System: Windows_NT Node Version: v18.16.0 Nuxt Version: 3.6.2 Nitro Version: 2.5.2 Package Manager: npm@9.8.0 Builder: vite User Config: pages, debug, dev, modules, pwa, app, ...
@danielroe where does the payload come from if I set
payloadExtraction
to false
? I noticed that no request is being made now if I browse to another page
I am not using useFetch
or anything like that so I suppose there shouldn't be a payload anyway but with payloadExtraction
set to true
it does generate one for every page
I am not too familiar with Nuxt so if this makes no sense please let me know π
Nuxt saves the content of every useasyncdata/usefetch call in a payload when doing this, so they won't be refetched when client-side navigation. otherwise they will be refetched on client side navigation even though they won't on hard reloads
I think I get it now. If
payloadExtraction
is set to false
, the payload is only stored in the static HTML files (probably for hydrating?), and Nuxt just makes the API call when you navigate to another page. Did I get that right?
And is it really necessary to generate a payload for pages that do not use useFetch
or related?
SvelteKit for example creates a __data.json
(equivalent to Nuxt's _payload.json
) only if you have a server-side load
I also noticed that Nuxt does not prefetch the payload (like when you hover over a link for example), this would be a nice feature too
SvelteKit has this: https://kit.svelte.dev/docs/link-options#data-sveltekit-preload-dataExactly
It should prefetch payloads on a generated site when they come into view
Ah yes it does, my bad
Unknown Userβ’15mo ago
Message Not Public
Sign In & Join Server To View
Not sure what you mean