Not all content is being generated by npx nuxi generate

[andystevensname]

I'm using the Nuxt Content. I'm attempting to generate my site as a static site using npm nuxi generate, but it's only generating some of my content. When it runs, it successfully generates the pages that are represented by .vue files in the /pages/blog directory and the site index:

• pages/index.vue
• pages/blog/[slug].vue
• pages/blog/index.vue
• pages/blog/tags/index.vue
• pages/blog/tags/[slug].vue

pages/blog/[slug].vue uses useAsyncData() and queryContent(), like this:

  const { path } = useRoute();
  const { data } = await useAsyncData(`content-${path}`, async () => {
    let post = queryContent().where({ _path: path }).findOne();
    return {
        post: await post,
      };
  });

These pages represent content in content/blog/, like content/blog/on-forgetting.md, which renders to website.com/blog/on-forgetting/. No problem there.

But the generate command doesn't generate any content that would be rendered by pages/[slug].vue, which is supposed to represent a .md file like content/about.md at website.com/about/

In a dev environment I couldn't get this second type of content to render using the blog template. But I got it working using this:

  const path = useRoute();
  const { data } = await useAsyncData(`content-/${path.params.slug}/`, async () => {
    let post = queryContent().where({ 'slug': path.params.slug }).findOne();
    return {
      post: await post
    };
  });

My question is, is there something obvious as it why only some content is being rendered? Is the content directory structured incorrectly? Is there a reason I couldn't use the same exact template in both places? Is there a problem with multiple [slug].vue pages? Is there something that I have to do in my nuxt.config.ts file to add these routes?

Here is my nuxt.config.ts:

import { defineNuxtConfig } from 'nuxt/config'

// https://v3.nuxtjs.org/api/configuration/nuxt.config
export default defineNuxtConfig({
  ssr: true,
  target: "static",
  modules: [
    '@nuxt/content',
    '@nuxtjs/tailwindcss'
  ],
  css: [
    '@fortawesome/fontawesome-svg-core/styles.css'
  ],
  content: {
    base: '/content'
  }
})

The repo I'm working out of is here: https://github.com/andystevensname/andystevens.name

Any help or pointers from the community would be greatly appreciated! Thanks!

[andystevensname]

Looks like this is a direct result of static site generation not being completely baked in to Nuxt 3 framework just yet. This discussion on that repo seems to be the place where folks are discussing things.

I was able to get the routes that weren't generating to generate by setting nitro.prerender.crawLinks to true, and by adding the routes manually:

nitro: {
  prerender: {
    crawlLinks: true,
    routes: ['/route1', '/route2'],
  },
},

[mohsin]

I'm having the same issue with my site, except mine are slugged content files inside /data/projects/ folder. Any idea how I can manually write these routes to ensure these get included? I'm using this code to render and getting this error:

[cossssmin]

You could write a module to register the routes.

./modules/routes-list.js

import { defineNuxtModule } from '@nuxt/kit'
import fs from 'fs/promises'
import path from 'path'

async function listFilesInDirectory(directory, prefix = '') {
  const entries = await fs.readdir(directory, { withFileTypes: true })

  const files = await Promise.all(entries.map(async (entry) => {
    const fullPath = path.join(directory, entry.name)
    const relativePath = path.join(prefix, entry.name)

    if (entry.isDirectory()) {
      // If the entry is a directory, recursively list the files in it
      return listFilesInDirectory(fullPath, relativePath)
    } else {
      // If the entry is a file, remove the extension, prepend a slash, and remove number and dot prefix
      const ext = path.extname(entry.name)
      const nameWithoutExtension = path.basename(entry.name, ext)
      const nameWithoutNumberPrefix = nameWithoutExtension.replace(/^\d+\.\s/, '')

      // Check if the name ends with 'index', if so, replace it with '/'
      if (nameWithoutNumberPrefix === 'index') {
        return path.join('/', prefix, '/')
      }

      let finalPath = path.join('/', prefix, nameWithoutNumberPrefix)

      // Replace backslashes with forward slashes on Windows, so we can build locally.
      // Seems that Nitro doesn't handle them for now...
      if (path.sep === '\\') {
        finalPath = finalPath.replace(/\\/g, '/')
      }

      return finalPath
    }
  }))

  // Flatten the array and return it
  return Array.prototype.concat(...files)
}

export default defineNuxtModule({
  async setup(_moduleOptions, nuxt) {
    const paths = await listFilesInDirectory('./content')
    nuxt.hook('nitro:config', (nitroConfig) => {
      nitroConfig.prerender.routes = nitroConfig.prerender.routes || []

      nitroConfig.prerender.routes?.push(...paths)
    })
  }
})

Then register the module in nuxt.config.ts:

export default defineNuxtConfig({
  // ...
  modules: [
    './modules/routes-list',
  ],
})