Generating RSS feed

28 September 2021 4 mins read

One of my requirements was to have an RSS feed. Because most of the personal bloggers I subscribe to have one, and that's how I get to know when they post something new!

What is an RSS feed?

  • An RSS feed is a formatted text document that contains all the important information about your blog. It's hosted on a server and (usually) has a public URL/link so anyone can view or access its contents. 
  • It contains all the information about your blog and posts, including your post's title, description, abstract, images, and more.

Why do I need an RSS feed for my blog?

  • The RSS feed allows anyone to subscribe to my blog and get notified when I publish something new.

Now that we have established the need for one let's begin setting up one. There are a couple of Repos in Github that would work with Nuxt. I went with one from the Nuxt Community. I have attached the Github repo in the post.

It is pretty customizable and has three different feed types (RSS 2.0, ATOM 1.0, and JSON 1.0). Setting it up is quite easy - I just followed their readme.

  1. Add @nuxtjs/feed dependency to your project.
yarn add @nuxtjs/feed # or npm install @nuxtjs/feed
  1. Add @nuxtjs/feed to the modules section of nuxt.config.js
export default {
  modules: [
    '@nuxtjs/feed'
  ],
  feed: [
    // Your feeds here
  ]
}
  1. In the nuxt.config.js, add:
export default {
  feed: [
    // A default feed configuration object
    {
      path: '/feed.xml', // The route to your feed.
      async create(feed) {}, // The create function (see below)
      cacheTime: 1000 * 60 * 15, // How long should the feed be cached
      type: 'rss2', // Can be: rss2, atom1, json1
      data: ['Some additional data'] // Will be passed as 2nd argument to `create` function
    }
  ]
}
  1. Feed Create function: In my case, I first collected all the posts and then sorted them by the publish date. Iterated through the list of posts and appended them to the feed.
const posts = await $content({deep: true}).sortBy('date', 'desc').fetch()
posts.forEach(post => {
  feed.addItem({
    title: post.title,
    id: post.slug,
    link: 'https://www.prasanthsasikumar.com/post/'+post.slug,
    description: post.abstract,
    content: post.abstract
  })
})

And, that's it! The feed would be available at the address set for 'path'. In my case : https://prasanthsasikumar.com/feed.xml.

Read the next post in this series here:
Made with ❤️, 🍺, Nuxt & Tailwind in 2021.