{"version":"https://jsonfeed.org/version/1.1","title":"Alessandro Jean's Blog","description":"Just a personal blog.","authors":[{"name":"Alessandro Jean","avatar":"https://alessandrojean.github.io/img/avatar-okabe-small.webp"}],"language":"en-US","home_page_url":"https://alessandrojean.github.io/blog","feed_url":"https://alessandrojean.github.io/blog/feed.json","icon":"https://alessandrojean.github.io/img/apple-touch-icon.png","items":[{"id":"generating-an-rss-feed-with-nuxt-content","url":"https://alessandrojean.github.io/post/generating-an-rss-feed-with-nuxt-content","title":"Generating an RSS feed with Nuxt Content","summary":"A simple walk through on how to create a feed and also provide the posts HTML.","content_html":"

Providing an RSS feed when you’re using Nuxt Content isn’t really a hard task, but you may find some harsh obstacles on the way.

\n

Generating the feed

\n

We will first start by creating the server route which will serve the RSS. Usually it’s convenient to put the feed in the same post where you content is. For example, if your post list is at /blog, the path /blog/feed.xml seems like a good place.

\n

In Nuxt, we can create such a route by creating the file server/routes/blog/feed.xml.get.ts.

\n

Caution:

This isn’t an API route, so it shouldn’t be placed at /server/api.

\n

The skeleton of the file is basically this:

\n
import { queryCollection } from '@nuxt/content/server';\n\nexport default defineEventHandler(async (event) => {\n  const posts = await queryCollection(event, 'blog')\n    .order('created_at', 'DESC')\n    .limit(10)\n    .all();\n\n  return posts;\n});\n
\n

What we want to do is manipulate the posts in such a way that the route actually returns a readable RSS feed. We can use the package rss to help us, as it contains an RSS builder which will make things easier.

\n

We will need to use the RSS class.

\n
import RSS from 'rss';\n
\n

To get started, we need to create the feed and provide some basic information.

\n
const url = 'https://example.org';\n\nconst feed = new RSS({\n  title: 'Example Blog',\n  description: 'Just a blog.',\n  site_url: url,\n  feed_url: `${url}/blog/feed.xml`,\n  language: 'en-US',\n  custom_elements: [\n    { icon: `${url}/img/apple-touch-icon.png` },\n  ],\n  custom_namespaces: {\n    content: 'http://purl.org/rss/1.0/modules/content/',\n    dc: 'http://purl.org/dc/elements/1.1/',\n    sy: 'http://purl.org/rss/1.0/modules/syndication/',\n  },\n});\n
\n

Some of the properties are pretty straightfoward. Other’s are just complements, such as custom_namespaces, which allows the generated XML to have extra tags that are not in the RSS specification.

\n

Since we have the array of posts, we can iterate over it to create each feed item.

\n
for (const post of posts) {\n  feed.item({\n    title: post.title,\n    guid: `${url}/post/${post.path}`,\n    url: `${url}/post/${post.path}`,\n    description: post.description,\n    date: new Date(post.created_at),\n    categories: post.category ? [post.category] : undefined,\n    custom_elements: [\n      { 'dc:creator': { _cdata: 'John Doe' } },\n    ],\n  });\n}\n
\n

Now that the feed is complete, we need to define the Content-Type header.

\n
setResponseHeader(event, 'Content-Type', 'text/xml');\n
\n

Then we can finally return the XML feed.

\n
return feed.xml();\n
\n

You can have a look at this site’s RSS for an example.

\n

Prerendering

\n

If your site is deployed with an server, you’re done. But if it is deployed as an static site, such when you use GitHub Pages, you need one additional step.

\n

We need to inform Nuxt to also prerender this server route during build. This can be done by editing the nitro property in nuxt.config.ts.

\n
export default defineNuxtConfig({\n  nitro: {\n    prerender: {\n      routes: ['/blog/feed.xml'],\n    },\n  },\n});\n
\n

Informing RSS readers about the feed

\n

You can put a link to the RSS feed in your page, but this will only work for the reader to click and copy it in their RSS reader manually. You can make things easier a bit by providing a <link rel=\"alternate\"> tag in your HTML <head>.

\n

With this, if the reader just paste your blog URL in the RSS reader, it can get the RSS link automatically. In Nuxt, this can be done with the useHead composable.

\n
useHead({\n  link: [{ \n    rel: 'alternate', \n    type: 'application/rss+xml', \n    title: 'Feed (RSS)', \n    href: '/blog/feed.xml',\n  }],\n});\n
\n

This is not mandatory, but it is considered a good practice.

\n

Providing the post HTML

\n

The current feed will work fine for all readers, but we’re just providing the links, there’s no body for the posts. While most sites do just that, I think it’s nice to also provide the full post content, so the reader can read in their preferred environment.

\n

This is the most tricky part to do with Nuxt Content. As in the moment of writing this article, Nuxt Content doesn’t seem to have a method to return your post rendered HTML in the server context. You need to do this manually.

\n

Nuxt Content uses @nuxtjs/mdc under the hoods, which then uses Unified’s remark and rehype.

\n

If you take a look into the post.body property, it is a Minimark AST. We could use the minimark package to get the Markdown string, but I faced some converting issues when doing that. It is easier if you get the Markdown source file content directly instead.

\n

To make things reusable, we will create a server util function markdownToHtml.

\n
import { readFile } from 'node:fs/promises';\nimport { join } from 'node:path';\n\nexport async function markdownToHtml(fileName: string) {\n  const filePath = join(process.cwd(), 'content', `${fileName}.md`);\n  const markdown = await readFile(filePath, 'utf-8');\n}\n
\n

The tricky part is creating a Unified pipeline to do a similar conversion that Nuxt Content does. We can get started by importing the plugins.

\n
import rehypeSlug from 'rehype-slug';\nimport rehypeStringify from 'rehype-stringify';\nimport remarkFrontmatter from 'remark-frontmatter';\nimport remarkGfm from 'remark-gfm';\nimport remarkMdc from 'remark-mdc';\nimport remarkParse from 'remark-parse';\nimport remarkRehype from 'remark-rehype';\nimport { unified } from 'unified';\n
\n

And then doing the pipeline.

\n
const result = await unified()\n  .use(remarkParse)\n  .use(remarkFrontmatter, ['yaml'])\n  .use(remarkGfm)\n  .use(remarkMdc)\n  .use(remarkRehype)\n  .use(rehypeSlug)\n  .use(rehypeStringify)\n  .process(markdown);\n\nreturn String(result);\n
\n

This will parse the Markdown, generate an AST, which will then be converted to HAST and processed until it is joined to a final HTML string.

\n

For most cases, this may do the job, but MDC supports Vue components, which is a problem. The approach I choose was to convert the components I use into simpler and equivalent ones by using just HTML existing tags.

\n

If you have any component into your Markdown, this existing pipeline will put it in the HTML as if it is a custom element. For example, Note.vue, called by ::note in your Markdown, will be outputted as <note></note>, which is not an existing HTML element.

\n

We can circumvent this by using the plugin. We will also need to install the hastscript package.

\n

What this plugin does is converting custom elements into other you specify. We can put in the pipeline with the following code.

\n
.use(rehypeComponents, {\n  components: {\n    'note': Note,\n  },\n})\n
\n

And then we create the Note component replacement. In this case, the Note element is originally a callout. The approach I choosed was to transform it into a <div> with a <p><strong>Note:</strong></p> as the first child.

\n

The Note component can be defined as so:

\n
import { h } from 'hastscript';\nimport type { ComponentFunction } from 'rehype-components';\n\nconst Note: ComponentFunction = (_, children) => h('div', [\n  h('p', h('strong', 'Note:')),\n  ...children,\n]);\n
\n

For example, the following Note block in Markdown

\n
::note\nThis is a note\n::\n
\n

Will be transformed into the following HTML:

\n
<div>\n  <p><strong>Note:</strong></p>\n  <p>This is a note</p>\n</div>\n
\n

As you might have guessed, you will need to do that for each custom Vue component you use in your Markdown files.

\n

With the function completed, we can put the result into each feed item:

\n
feed.item({\n  title: post.title,\n  guid: `${url}/post/${slug}`,\n  url: `${url}/post/${slug}`,\n  description: post.description,\n  date: new Date(post.created_at),\n  categories: post.category ? [post.category] : undefined,\n  custom_elements: [\n    { 'dc:creator': { _cdata: 'John Doe' } },\n    { 'content:encoded': { _cdata: await markdownToHtml(post.path) } }, // [!CODE ++]\n  ],\n});\n
\n

Now the RSS feed is fully complete with your posts’ content as well.

\n

Other approach I have considered

\n

The alternative idea I had to solve this issue was using one of the Nuxt hooks after the build. You can write a custom script to parse the /blog generated HTML to get the links, and then parse the each post generated file to get the text part.

\n

This will likely do the job, but depending on your custom components, you might get a dirty HTML than just parsing the Markdown. For example, some of the <pre> blocks I use here are customized to include a fancier window around it with the file name and also a button to copy the code content. If you don’t handle these edge cases, the RSS readers might not render the content in a desirable way.

\n

Conclusion

\n

Would be nice if the Nuxt team provides an easier way to do this, as RSS feeds are still very helpful and used by some people. Maybe with a potential rewrite of the module to use Comark they implement it? Who knows.

","date_published":"2026-06-16T00:00:00.000Z","date_modified":"2026-06-19T18:36:00.000Z","tags":["Programming"],"language":"en-US"}]}