How to use generate.routes in Nuxt Content v2

[jshimkoski]

In Nuxt Content v1, you could generate all routes in nuxt.config.js by doing something like this:

  generate: {
    async routes() {
      const { $content } = require('@nuxt/content')
      const files = await $content({ deep: true }).only(['path']).fetch()
      return files.map((file) => (file.path === '/index' ? '/' : file.path))
    },
  },

What is the equivalent of that in Nuxt Content v2?

I have pages that the crawler misses because they are not linked to other content in the app.

[jshimkoski]

The closest thing I can find so far is specifying the nitro.prerender.routes config option:

{
  nitro: {
    prerender: {
      routes: ['/named-route']
    }
  }
}

The problem is, it looks like you need to specify each named route instead of being able to use a function or some sort of regular expression to just grab all of the routes found inside the /content directory.

This is pretty brittle. Is there any way around this?

[benoitdemaegdt]

hey @jshimkoski 👋

I came across the same issue while trying to generate a sitemap.
I don't know if @nuxt/content v2 provides something similar for fetching all your content 🤷‍♂️

However, you can use nitro:build:before and prerender:route hooks inside a nuxt module.
You may have a look at this README and this file for further understanding.

Hopefully this can help you 😉

[adamalfredsson]

Been a struggle but came to a workaround. It's awfully difficult to use content outside of the nuxt context as noted by comments in this issue

For a statically generated site, you could instead list all links during prerendering, so that it's picked up by the crawler. For example, in app.vue:

<template>
  <NuxtPage />
  <template v-if='!isMounted'>
    <NuxtLink v-for='route in routes' :to='route' />
  </template>
</template>

<script lang="ts">
const useIsMounted = () => {
  const isMounted = ref(false)
  onMounted(() => {
    isMounted.value = true
  })
  return isMounted
}

export default defineNuxtComponent({
  setup() {
    const { data: routes } = useAsyncData(() => fetchRoutes())
    const isMounted = useIsMounted()
    return { routes, isMounted }
  },
})
</script>

With this setup, all routes will be picked up by the crawler and prerendered and the links markup will not be included in the final statically generated output.

[metaforx]

I was struggling with similar issue and at the end created a nuxt module for the job:
https://github.com/palmbeach-interactive/nuxt-content-routes

DocumentDriven route creation is nice but, in my case, not implementable with i18n prefixing and other multilingual needs. I came up with a small module generating all routes for all files and directories in the specified content folder, respecting the chosen i18n strategy (prefix, prefix_except_default). It's not tested on a production env yet, so use at own risk as always.