How to create an RSS feed in Nuxt Content

Nuxt Content is an amazing tool that makes working with markdown content on Nuxt projects a breeze. Thanks to the power of Nuxt server routes, it's really easy to create an RRS feed.

Let's take a look at the code.

import RSS from 'rss';
import { serverQueryContent } from '#content/server';

export default defineEventHandler(async (event) => {
    const BASE_URL = 'https://michalkuncio.com';

    const feed = new RSS({
        title: 'Blog | Michał Kuncio - Modern webdev - the cool parts',
        site_url: BASE_URL,
        feed_url: `${BASE_URL}/rss.xml`
    });

    const docs = await serverQueryContent(event)
        .sort({ date: -1 })
        .where({ _partial: false })
        .find();

    for (const doc of docs) {
        feed.item({
            title: doc.title ?? '-',
            url: `${BASE_URL}${doc._path}`,
            date: doc.date,
            description: doc.description
        });
    }

    const feedString = feed.xml({ indent: true });

    setHeader(event, 'content-type', 'text/xml');

    return feedString;
});

First of all, let's create a new API route inside api/routes directory by creating a new file called 'rrs.ts'. Thanks to that, the RRS feed will be available on your-domain.com/rrs.xml.

Next, inside our defineEventHandler, we will create a new feed by using the RRS library. Thanks to that library, it will be a little bit easier to parse the RRS feed.

const feed = new RSS({
    title: 'Blog | Michał Kuncio - Modern webdev - the cool parts',
    site_url: BASE_URL,
    feed_url: `${BASE_URL}/rss.xml`
});

Next, we have to fetch all the documents we want to include inside our RRS feed. We can make use of serverQueryContent function from '#content/server':

const docs = await serverQueryContent(event)
    .sort({ date: -1 })
    .where({ _partial: false })
    .find();

Next up, we have to iterate over our docs and put every one of them to our previously created feed object:

for (const doc of docs) {
    feed.item({
        title: doc.title ?? '-',
        url: `${BASE_URL}${doc._path}`,
        date: doc.date,
        description: doc.description
    });
}

Then, we need an RRS feed string, let's use feed.xml() function for that:

const feedString = feed.xml({ indent: true });

And finally, we have to set the correct response headers for browsers to correctly detect xml file and return our feed string:

setHeader(event, 'content-type', 'text/xml');

return feedString;

And that's it! I love how easy and clean this solution is. Working with Nuxt Content is really an amazing experience.