RSS Feed with Nuxt Content v3

Add an RSS Feed to your Nuxt 3 site: here’s how to add an RSS feed to your site built with Nuxt 3 and Nuxt Content v3.

What is an RSS Feed? An RSS feed is an XML file generated by your site’s server that contains information about your articles. What’s the difference compared to a sitemap? The RSS feed contains the information (title, description, date, etc.) and not just the links.

Why add it? Because people want to follow the new posts you publish and receive real-time updates through tools like Feedly. Just enter your site’s link and they’ll always be up to date.

How do you do it with Nuxt 3 and Nuxt Content v3? Assuming Nuxt and Nuxt Content are already installed, add the feed library with:

npm i feed

Then create a route in your server/routes called, for example, rss.xml.ts (you can name it as you prefer):

// server/routes/rss.xml.ts
import { Feed } from 'feed'

export default defineEventHandler(async (event) => {
  const posts = await queryCollection(event, 'content').all()

  const feed = new Feed({
    title: 'Feed Title',
    description: 'This is my personal feed!',
    // ...feed configuration
  })

  posts.forEach((post) => {
    feed.addItem({
      title: post.title,
      id: `https://vittoriogioda.com/${post.path}`,
      // ...post details
    })
  })

  return feed.rss2()
})

Reach your RSS feed at yoursite.com/rss.xml and your feed is ready!