Nuxt•4w ago

Static builds with nuxt content result in empty pages

My [slug].vue :

<script setup>
const path = useRoute().path
const { data: page } = await useAsyncData(`${path}`, () => {
  return queryCollection('pages').path(path).first()
})
</script>

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

<script setup>
const path = useRoute().path
const { data: page } = await useAsyncData(`${path}`, () => {
  return queryCollection('pages').path(path).first()
})
</script>

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

When running in dev mode, everything works fine and my page content is shown. When generating with npx nuxi generate my build has empty pages. I tried both with ssr: false/true. My nitro config:

nitro: {
  static: true,
  prerender: {
    crawlLinks: true,
    failOnError: false,
  },
}

nitro: {
  static: true,
  prerender: {
    crawlLinks: true,
    failOnError: false,
  },
}

Would anyone be able to help? 😊

8 Replies

kapa.ai•4w ago

Hi @Thorge. 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, I can offer some insights into your issue with static builds using Nuxt Content resulting in empty pages. The problem you're experiencing is likely related to how Nuxt Content handles the database during static site generation. According to the Nuxt Content documentation on static deployment:

Nuxt Content will load the database in the browser using WASM SQLite, this way, the content queries happening on client-side navigation or actions will run in the browser.

This means that when you're generating a static site, the content isn't available during the build process in the same way it is during development or server-side rendering. To address this issue, you can try the following: 1. Ensure that you're using the latest version of Nuxt Content, as there may have been improvements to static site generation in recent releases. 2. Modify your nuxt.config.ts to explicitly prerender your content routes. Add something like this to your configuration:

nitro: {
  prerender: {
    crawlLinks: true,
    routes: ['/'], // Add your main routes here
    ignore: ["/api"] // Ignore any API routes if you have them
  }
}

nitro: {
  prerender: {
    crawlLinks: true,
    routes: ['/'], // Add your main routes here
    ignore: ["/api"] // Ignore any API routes if you have them
  }
}

3. If you're using dynamic routes (which it seems you are with [slug].vue), you might need to explicitly list these routes for prerendering. You can do this by adding a prerenderRoutes hook in your nuxt.config.ts:

hooks: {
  'nitro:config': (nitroConfig) => {
    nitroConfig.prerender.routes = nitroConfig.prerender.routes || []
    // Add your dynamic routes here
    nitroConfig.prerender.routes.push('/your-dynamic-route-1', '/your-dynamic-route-2')
  }
}

hooks: {
  'nitro:config': (nitroConfig) => {
    nitroConfig.prerender.routes = nitroConfig.prerender.routes || []
    // Add your dynamic routes here
    nitroConfig.prerender.routes.push('/your-dynamic-route-1', '/your-dynamic-route-2')
  }
}

4. Make sure that your content is actually available during the build process. Check that your content files are in the correct directory and that they're being picked up by Nuxt Content. If these steps don't resolve the issue, you might need to consider using a hybrid approach where you prerender some pages and use client-side fetching for others. This can be achieved by adjusting your routeRules in the Nuxt configuration. Remember that static site generation with dynamic content can be tricky, and you might need to experiment with different approaches depending on your specific use case. If you continue to face issues, you might want to check the Nuxt GitHub issues for similar problems or consider opening a new issue with a minimal reproduction of your setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

ThorgeOP•4w ago

@kapa.ai My routes are accessed during prerender and I use latest version of nuxt content (v3). I also tried with explicit route names and pages, e.g., about.vue. It must be something else, that I'm missing.

kapa.ai•4w ago

Let me check the knowledge base for you again. One moment! :books: ---------------------- I apologize for the confusion in my previous answer. Let's look at your specific case more closely, considering that you're using the latest version of Nuxt Content (v3) and that your routes are being accessed during prerender. Based on the knowledge sources provided, there are a few things we can consider: 1. Document Driven Mode: The approach you're using in your [slug].vue file is similar to implementing document-driven mode in Nuxt Content v3. According to the Content documentation, your implementation looks correct. However, you might want to try using queryContent instead of queryCollection:

   const { data: page } = await useAsyncData(route.path, () => {
     return queryContent().where({ _path: route.path }).findOne()
   })

   const { data: page } = await useAsyncData(route.path, () => {
     return queryContent().where({ _path: route.path }).findOne()
   })

2. Prerendering Configuration: Your nitro configuration looks good, but you might want to ensure that you're explicitly including your content routes. According to the Nuxt documentation on prerendering, you can try:

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

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

3. Runtime Prerender Configuration: If your content is dynamically generated or fetched from an API, you might need to use runtime prerender configuration. The Nuxt documentation suggests using the prerenderRoutes function or the prerender:routes Nuxt hook to add routes dynamically during the build process. 4. Debugging: To better understand what's happening during the build process, you can add some console logs or use the prerender:generate Nitro hook to see which routes are being generated and if there are any issues. For example:

   export default defineNuxtConfig({
     nitro: {
       hooks: {
         'prerender:generate'(route) {
           console.log('Prerendering:', route.route)
           if (!route.contents) {
             console.warn('Empty content for route:', route.route)
           }
         }
       }
     }
   })

   export default defineNuxtConfig({
     nitro: {
       hooks: {
         'prerender:generate'(route) {
           console.log('Prerendering:', route.route)
           if (!route.contents) {
             console.warn('Empty content for route:', route.route)
           }
         }
       }
     }
   })

5. Content Rendering: Ensure that your <ContentRenderer> component is correctly set up and that you're not accidentally filtering out content. If you've already tried these approaches and are still experiencing issues, it might be helpful to create a minimal reproduction of your problem and share it on the Nuxt GitHub issues or the Nuxt Content GitHub issues. The Nuxt team or community might be able to provide more specific guidance based on your exact setup. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•4w ago

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

Wm•3w ago

/nuxt.config.ts

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  pages: true,
  modules: ['@nuxt/content', '@nuxt/ui']
})

// https://nuxt.com/docs/api/configuration/nuxt-config
export default defineNuxtConfig({
  compatibilityDate: '2024-11-01',
  devtools: { enabled: true },
  pages: true,
  modules: ['@nuxt/content', '@nuxt/ui']
})

/content.config.ts

import { defineContentConfig, defineCollection } from '@nuxt/content'
export default defineContentConfig({
    collections: {
        content: defineCollection({
            type: 'page',
            source: '**/*.md'
        })
    }
})

import { defineContentConfig, defineCollection } from '@nuxt/content'
export default defineContentConfig({
    collections: {
        content: defineCollection({
            type: 'page',
            source: '**/*.md'
        })
    }
})

/pages/index.vue

<script setup lang="ts">

</script>

<template>
  <main class="container mx-auto relative mt-10 grid grid-cols-4">
    <div class="col-span-1">
      <h1 class="text-5xl p-1.5">T3</h1>
    <SideNavigation/>
    </div>
    <div class="col-span-3">
      <MdContent/>
    </div>
  </main>
</template>

<script setup lang="ts">

</script>

<template>
  <main class="container mx-auto relative mt-10 grid grid-cols-4">
    <div class="col-span-1">
      <h1 class="text-5xl p-1.5">T3</h1>
    <SideNavigation/>
    </div>
    <div class="col-span-3">
      <MdContent/>
    </div>
  </main>
</template>

/components/sideNavigation.vue

<script setup lang="ts">
import type {ContentNavigationItem} from "@nuxt/content";

const route = useRoute()
const {data: main_navigation} = await useAsyncData(route.path, async () => {
  return queryCollectionNavigation('content')
})

</script>

<template>
  <div class="sticky top-10">
    <nav v-for="main_nav of main_navigation" :key="main_nav.path" class="col-span-1">

<script setup lang="ts">
import type {ContentNavigationItem} from "@nuxt/content";

const route = useRoute()
const {data: main_navigation} = await useAsyncData(route.path, async () => {
  return queryCollectionNavigation('content')
})

</script>

<template>
  <div class="sticky top-10">
    <nav v-for="main_nav of main_navigation" :key="main_nav.path" class="col-span-1">

/components/mdContent.vue

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

const {data: page} = await useAsyncData(`page-${route.path}`, () => {
  return queryCollection('content').path(route.path).first()
})


if (!page.value) {
  throw createError({statusCode: 404, statusMessage: 'Page not found', fatal: true})
}

</script>

<template>
    <ContentRenderer
        v-if="page"
        :value="page"
        class="prose dark:prose-invert"
    />
</template>

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

const {data: page} = await useAsyncData(`page-${route.path}`, () => {
  return queryCollection('content').path(route.path).first()
})


if (!page.value) {
  throw createError({statusCode: 404, statusMessage: 'Page not found', fatal: true})
}

</script>

<template>
    <ContentRenderer
        v-if="page"
        :value="page"
        class="prose dark:prose-invert"
    />
</template>

That code works and generates pages using npm run generate

ThorgeOP•3w ago

@Wm Thanks for sharing your code! It was quite similar to mine, so I removed everything and gradually re-added my code until I found the issue. Turns out the problem was a <client-only> tag in my layout file that wrapped <NuxtPage />. Removing it fixed everything. Appreciate your help!

Wm•3w ago

Admittedly it had taken me a few hours to understand the new Nuxt/Content system. Good to hear it worked out; happy coding

Gaming

Programming

Static builds with nuxt content result in empty pages

Did you find this page helpful?