How to Create RSS Feed from Nuxt Content

How to create an RSS feed from Nuxt Content articles. This guide will show you how to use a simple drop-in module to add the entire content to your feed.

An official doc article on how to construct an RSS feed from Nuxt Content already exists. However, it merely adds the excerpt as content. Most feed readers allow you to read the entire article without switching to another app. This post will show you how to use a simple drop-in module to add the entire content to an RSS feed.

You most likely set up your feed in a similar fashion to the Nuxt Content guides. A simplified example of a single RSS feed arrangement is shown below:

export default {
  modules: ["nuxt-content-body-html", "@nuxt/content", "@nuxtjs/feed"],
  feed: [
    {
      create: async (feed) => {
        const $content = require("@nuxt/content").$content;
        feed.options = {
          title: "My Blog",
          link: "https://me.com/blog",
          description: "It's all about programming!",
        };

        const posts = await $content("posts")
          .sortBy("createdAt", "desc")
          .fetch();
        posts.forEach((post) => {
          const url = `https://me.com/blog/${post.slug}`;
          feed.addItem({
            author: post.authors,
            content: post.bodyHtml,
            date: new Date(post.createdAt),
            description: post.description,
            id: url,
            link: url,
            title: post.title,
          });
        });
      },
      path: "/feed",
      type: "rss2",
    },
  ],
};

That's it; your feed should now have complete HTML content! To test it, I recommend using Inoreader; you can reload the articles using the small reload button, and you should see changes.