[v3] Page not found on preview after generate

[brokuka]

Environment

---

• Operating System: Windows_NT
• Node Version: v22.12.0
• Nuxt Version: 3.15.3
• CLI Version: 3.20.0
• Nitro Version: 2.10.4
• Package Manager: pnpm@9.15.4
• Builder: -
• User Config: devtools, future, modules, eslint, compatibilityDate
• Runtime Modules: @nuxt/eslint@0.7.5, template-copyright@1.0.1, @nuxt/content@3.0.0, nuxt-security@2.1.5
• Build Modules: -

---

Version

v3

Reproduction

// ~/pages/[...slug].vue

<script setup lang="ts">
const route = useRoute()

const { data } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first())
</script>

<template>
  <ContentRenderer v-if="data" :value="data" />
</template>

Content

Add some pages in content folder.

For example:

Description

Note

Using nuxt build all pages works as expected.

Getting 404 error on preview after generate nuxt generate. Works only page root /, for example if you have blog page there will be throwing error.

Additional context

No response

Logs

[thorge]

Same here. Maybe someone can elaborate on how to make static builds work?

In dev mode everything works fine. I tried both ssr: true/false. Pages are empty after build.

Update: It works now, I forgot a client-only tag 🤦

[undefinedhuman]

Hi, facing the same issue, only thing that works for me is defining the final paths in the nitro prerender block:

  nitro: {
    static: true,
    prerender: {
      routes: ["/sitemap.xml", "/", "/docs/getting-started/installation"],
    },
  },

[thorge]

Hi, facing the same issue, only thing that works for me is defining the final paths in the nitro prerender block:

nitro: {
static: true,
prerender: {
routes: ["/sitemap.xml", "/", "/docs/getting-started/installation"],
},
},

@undefinedhuman You might want to try to crawl your links when pre-rendering. This only works, if there a links pointing to your pages:

// nuxt.config.ts
nitro: {
  prerender: {
    crawlLinks: true
  }
}

[cailliaud]

I have the same issue with the V3 on an SPA Nuxt app.
The problem can be reproduced

Reproduction

Just take the i18n example from this repository: https://github.com/nuxt/content/tree/main/examples/i18n

• toggle ssr:false on nuxt config

it will work in dev mode but after npm run generate and serve the static content it won't work anymore

------------------------------
- Operating System: Windows_NT
- Node Version:     v22.14.0
- Nuxt Version:     3.15.4
- CLI Version:      3.22.4
- Nitro Version:    2.10.4
- Package Manager:  npm@10.9.2
- Builder:          -
- User Config:      modules, devtools, future, compatibilityDate, i18n, ssr
- Runtime Modules:  @nuxtjs/i18n@9.2.1, @nuxt/content@3.2.2
- Build Modules:    -
------------------------------

I will go back on V2 waiting a fix or maybe an explanation or doc with more details on static usage.

I tried to remove the useAsyncData because it is static content, no ssr process:

const getPage = async () => {
  const collection = ('content_' + locale.value) as keyof Collections
  return await queryCollection(collection).path(slug.value).first()
}

const page = getPage()

But now, it is not anymore an HTTP 404 but there is an exception occuring in the method first()

Dy3Dn_oW.js:14 InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

[farnabaz]

I believe this is due to Nuxt generation and your HTTP server behavior.
After generating, try using npx http-server .output/public command to serve the website. Does it work for you?

[deetz99]

Using the command npx http-server .output/public works for me with ssr: false, which is great. Though using npx serve .output/public does not. Any particular reason why? serve was the recommended way to preview generated sites previously.

[ubugeeei]

Using the command npx http-server .output/public works for me with ssr: false, which is great. Though using npx serve .output/public does not. Any particular reason why?

I ran into the same problem!

[masterkram]

I am also running into this issue when deploying on github pages.
Running the build with npx http-server indeed fixes it.

But my deployments of this repo on github pages are not working.
See the deployment here: https://masterkram-minted-directory.nuxt.space/

Navigation to another page gives the error:
InvalidCharacterError: Failed to execute 'atob' on 'Window': The string to be decoded is not correctly encoded.

This happens when this call is done:

return await queryCollection('directory').path(`/dir/${lastSlug}`).first();

[AzizFacilex]

Having the same problem on calling .all():

[farnabaz]

Should be fixed in #3245
It will be released in v3.4. Until then, you can use the PR release to test and move forward.

npm i https://pkg.pr.new/@nuxt/content@3245

I appreciate it if you can test and confirm the fix

[cailliaud]

Big Thanks for the v3.4. It works perfeclty now on single page app 😄