Generating RSS feed

28 September 2021 4 mins read

An RSS feed was a key requirement. Most personal blogs include one, and it’s a reliable way to know when something new is published.

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?

  • An RSS feed allows anyone to subscribe to the blog and get notified when something new is published.

Now that the need is clear, let’s set one up. There are a couple of repositories on GitHub that work with Nuxt. The one used here is from the Nuxt Community (linked above).

It’s quite customizable and supports three different feed types (RSS 2.0, ATOM 1.0, and JSON 1.0). Setup is straightforward by following the 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: First collect all the posts, sort them by publish date, then iterate through the list and append 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/posts/'+post.slug,
    description: post.abstract,
    content: post.abstract
  })
})

And that’s it. The feed will be available at the address set for path (for example: https://prasanthsasikumar.com/feed.xml).

Read the next post in this series here:

You might also like the following posts …