How to create RSS feed with Nuxt 3 and Nuxt Content

RSS feed is a simple way to keep readers updated with your content. It's a standard format that can be read by many feed readers. In this article, I'll show you how to create an RSS feed for your Nuxt 3 site using Nuxt Content.

This site is built with Nuxt 3 and Nuxt Content (as of writing, it's in version 2) and its RSS feed is available here.

Pre-requisites

This guide assumes you have a Nuxt 3 project set up with Nuxt Content. If you do not have Nuxt Content set up and you are using other content management system, you can still follow along with some modifications.

Assume you have a markdown content directory structure like this:

.
├── content
|   ├── article
|   |   ├── article-1.md
|   |   ├── article-2.md
|   |   ├── article-3.md
|   |   ├── article-4.md
|   |   └── article-5.md

Each markdown file .md should at least have the following font matter:

---
title: Your title # this is not required if your first <h1> is your title
description: Your title # this is not required, Nuxt Content will use the first paragraph as description
date: 2024-12-06
---

Next we'll install rss package, this will help us generate the RSS feed.

npm install rss

Create a Server Route

To handle request for RSS feed, we will need to create a server route. In Nuxt 3, you can create a server route by creating a file in server/routes directory.

Let's create a file rss.xml.ts in server/routes directory. This will make the RSS feed available at https://your-site.tld/rss.xml.

First, we fetch the articles from Nuxt Content using serverQueryContent().

server/routes/rss.xml.ts

import { serverQueryContent } from "#content/server";

export default defineEventHandler(async (event) => {
  const articles = await serverQueryContent(event, "article")
    .sort({ date: -1 })
    .find();
});

The next step is to add the rss library to generate the RSS XML content.

server/routes/rss.xml.ts

import { serverQueryContent } from "#content/server";
import rss from "rss";

export default defineEventHandler(async (event) => {
  const articles = await serverQueryContent(event, "article")
    .sort({ date: -1 })
    .find();

  const feed = new rss({
    title: "Your Site Title",
    site_url: "https://your-site.tld",
    feed_url: "https://your-site.tld/rss.xml", // this should match your route path
  });

  for (const article of articles) {
    feed.item({
      title: article.title || "",
      description: article.description,
      date: article.date,
      url: `https://your-site.tld${article._path}`,
    });
  }

  setHeaders(event, { "Content-Type": "application/rss+xml" });
  return feed.xml();
});

That's it! You now have a working RSS feed for your site. If we now navigate to /rss.xml, we should see the RSS feed.

However, doing this way, the RSS feed will always be generated on the fly, this is not ideal. Continue reading to see how to pre-generate the RSS feed with Nuxt.

Pre-generate your RSS feed

You can set to pre-render your RSS feed each time you build your site. This way, the RSS feed will be available as a static file and will be served faster.

To do this, add the following config to your nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  nitro: {
    // pre-render the RSS feed
    prerender: {
      routes: ["/rss.xml"],
    },
  },
});

Enrich your RSS feed

You can enrich your RSS feed by adding more information. You can refer to the rss's Example Usage section.

server/routes/rss.xml.ts

export default defineEventHandler(async (event) => {
  // ...

  const feed = new rss({
    title: "Your Site Title",
    site_url: "https://your-site.tld",
    feed_url: "https://your-site.tld/rss.xml",

    // add more information
    language: "en",
    description: "Your site description",
    image_url: "https://your-site.tld/image.png",
    copyright: `© ${new Date().getFullYear()} Your Name`,
    categories: ["Category 1", "Category 2"],
    ttl: String(60 * 60 * 24), // 1 day
  });

  for (const article of articles) {
    feed.item({
      title: article.title || "",
      description: article.description,
      date: article.date,
      url: `https://your-site.tld${article._path}`,

      // add more information
      categories: ["Category 1", "Category 2"],
      author: "Author Name",
    });
  }

  // ...
});

12 Aug 2024 • nuxt, nitro, rss, programming