Prerendering All Routes By Default With Nuxt Content

When I was first using @nuxt/content I had trouble figuring out how to render my blog posts. My Nuxt Static site was building correctly, but none of the routes seemed to be getting included. If you are like I was, frustrated that things were not working, you've come to the right place. The issue is that the Nuxt crawler does not know about the routes in the /content directory it only knows about the routes in /pages. The crawler looks for links mentioned in the built routes and builds those routes as well. This may be why you might have noticed some /content routes being included in the final build and others not being included. The workaround is to hard-code all of these routes in your nuxt.config.ts file like so:

// https://v3.nuxtjs.org/api/configuration/nuxt.configexport default defineNuxtConfig({    nitro: {        prerender: {                  routes: ['/blog/post1.md', '/blog/post2.md']         },    }}

This isn't ideal (at least for me) because in the future I want to build a CLI that allows me to generate a blog template and have it work out of the box on my next static build without having to try to manipulate any other files. So here's how to do it.

The Solution

We could write a bash script that travels through the content directory OR we could take another route and do this insido of Node. To do this we need to install Glob a library that allows us to have access to similar pattern matching that we have in the command line. To get started:

npm install --save-dev glob

The next thing we'll do is import it in our nuxt.config.ts and start using it to see how we might be able to leverage it directly inside of our config.

import glob from 'glob';const files = glob.sync('content' + '/**/*')console.log(files)// https://v3.nuxtjs.org/api/configuration/nuxt.configexport default defineNuxtConfig({    nitro: {        prerender: {                  routes: ['/blog/post1.md', '/blog/post2.md', ...files]        },    }}

One issue we have is that we don't need to prepend each route with content. Another issue is the routes that we are including. With the following directory:

/content
|---/blog
    |---post1.md
    |---post1.md

Our files array would include /blog in the list of files as well. If we already have a Nuxt Page for /blog this would be fine and Nuxt would see the route in the pages directory, but if we did not, we would be telling nuxt to render a route that does not exist since /blog is a directory and not a file. Along with that if we have any other file types (for whatever reason) like .jpg inside of our content folder we would run into the same issue.

To fix this, we need to do some filtering:

// These are Contents supported formatsconst formats = ['.md', '.json', '.csv', 'yml']const files = glob.sync('content' + '/**/*')contentFiles = files    .map(dir => dir.replace('content', ''))    .filter(dir => formats.some(ft => dir.endsWith(ft)))    .map(dir => dir.replace(/\.[^/.]+$/, ""));console.log(contentFiles)

The first map gets rid of the content portion of the directory. The filter makes sure that any file not supported by @nuxt/content is not included in the array. The last map gets rid of our file type at the end of the file.

Our code should now look like the following:

import glob from 'glob';const files = glob.sync('content' + '/**/*')// These are Contents supported formatsconst formats = ['.md', '.json', '.csv', 'yml']const files = glob.sync('content' + '/**/*')const contentFiles = files    .map(dir => dir.replace('content', ''))    .filter(dir => formats.some(ft => dir.endsWith(ft)))    .map(dir => dir.replace(/\.[^/.]+$/, ""));// https://v3.nuxtjs.org/api/configuration/nuxt.configexport default defineNuxtConfig({    nitro: {        prerender: {                  routes: [...contentFiles]        },    }}

Tada! Each supported file in the content directory should now be discoverable.