How to Create an RSS Feed for Your Nuxt Website

RSS feeds remain one of the most reliable ways for users to stay updated with your content. While social media algorithms come and go, RSS feeds provide a direct line to your audience. In this tutorial, I'll show you how to implement a dynamic RSS feed in your Nuxt application.

Why RSS Feeds Matter

RSS (Really Simple Syndication) feeds allow users to subscribe to your content using feed readers like Feedly, Inoreader, or even built-in browser features. They're particularly valuable for:

• Content creators who want to ensure their audience never misses an update
• Technical blogs where readers prefer curated, chronological content
• News sites that need to syndicate content to other platforms
• SEO benefits as search engines can easily discover and index your content

Prerequisites

Before we start, make sure you have:

• A Nuxt 3 application set up
• Basic knowledge of TypeScript/JavaScript
• Understanding of Nuxt's server routes

Step 1: Install the Feed Package

First, we need to install the feed package, which makes RSS generation straightforward:

npm install feed

This package provides a clean API for creating RSS 2.0, Atom 1.0, and JSON Feed formats.

Step 2: Create the RSS Server Route

Nuxt 3's server routes make it easy to create API endpoints. Create a new file at server/routes/rss.xml.ts:

import { Feed } from 'feed'

export default defineEventHandler(async (event) => {
  // Configure the feed metadata
  const feed = new Feed({
    title: 'My Awesome Blog',
    description: 'Latest articles from my blog',
    id: 'https://mysite.com/',
    link: 'https://mysite.com/',
    language: 'en',
    image: 'https://mysite.com/favicon.ico',
    favicon: 'https://mysite.com/favicon.ico',
    copyright: `All rights reserved ${new Date().getFullYear()}`,
    updated: new Date(),
    generator: 'Nuxt RSS Feed',
    feedLinks: {
      rss2: 'https://mysite.com/rss.xml'
    },
    author: {
      name: 'Your Name',
      email: '[e-mail]',
      link: 'https://mysite.com'
    }
  })

  // Example articles - replace with your actual data source
  const articles = [
    {
      title: 'Getting Started with Nuxt 3',
      slug: 'getting-started-nuxt-3',
      summary: 'A comprehensive guide to building modern web apps with Nuxt 3',
      content: 'Full article content here...',
      publishDate: '2024-01-15',
      author: 'Your Name'
    },
    {
      title: 'Understanding Server-Side Rendering',
      slug: 'understanding-ssr',
      summary: 'Deep dive into SSR benefits and implementation',
      content: 'Full article content here...',
      publishDate: '2024-01-10',
      author: 'Your Name'
    }
  ]

  // Add each article to the feed
  articles.forEach((article) => {
    feed.addItem({
      title: article.title,
      id: `https://mysite.com/blog/${article.slug}`,
      link: `https://mysite.com/blog/${article.slug}`,
      description: article.summary,
      content: article.content,
      author: [
        {
          name: article.author,
          email: '[e-mail]',
          link: 'https://mysite.com'
        }
      ],
      date: new Date(article.publishDate)
    })
  })

  // Set the correct content type for XML
  setResponseHeader(event, 'content-type', 'text/xml')

  // Return the RSS feed
  return feed.rss2()
})

Step 3: Make Your RSS Feed Discoverable

To help browsers and feed readers automatically discover your RSS feed, add a link tag to your page head. In your app.vue or layout file:

<template>
  <div>
    <NuxtRouteAnnouncer />
    <NuxtPage />
  </div>
</template>

<script setup>
useHead({
  link: [
    {
      rel: 'alternate',
      type: 'application/rss+xml',
      title: 'My Awesome Blog RSS',
      href: '/rss.xml'
    }
  ]
})
</script>

Step 4: Integrate with Your Content Management

The example above uses static data, but in a real application, you'll want to fetch content dynamically. Here are some common scenarios:

Using Nuxt Content

If you're using @nuxt/content, you can fetch your articles like this:

// In your rss.xml.ts file
const articles = await queryContent('blog')
  .sort({ publishDate: -1 })
  .limit(20)
  .find()

Using a Headless CMS

For external CMSs like Strapi, Contentful, or Sanity:

// Example with fetch
const response = await fetch('https://api.yourservice.com/articles')
const articles = await response.json()

Using a Database

With Prisma or another ORM:

const articles = await prisma.article.findMany({
  orderBy: { publishDate: 'desc' },
  take: 20
})

Step 5: Testing Your RSS Feed

Start your development server:

npm run dev

Navigate to http://localhost:3000/rss.xml to see your RSS feed. You should see properly formatted XML that looks like this:

<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>My Awesome Blog</title>
    <description>Latest articles from my blog</description>
    <link>https://mysite.com/</link>
    <!-- Articles will appear here -->
  </channel>
</rss>

1. Optimize Performance

Cache your RSS feed to avoid regenerating it on every request:

// Add caching headers
setResponseHeader(event, 'cache-control', 'max-age=3600') // 1 hour

2. Limit Feed Size

Don't include all your articles - 10-20 recent posts are usually sufficient:

const articles = await getArticles().slice(0, 20)

3. Include Full Content

Consider including the full article content in the feed for better user experience:

feed.addItem({
  // ... other properties
  content: article.fullContent, // Full HTML content
  description: article.excerpt   // Short summary
})

4. Handle Images Properly

Make sure image URLs in your content are absolute:

const content = article.content.replace(
  /src="\/images\//g,
  'src="https://mysite.com/images/'
)

Advanced Features

Multiple Feed Formats

The feed package supports multiple formats:

// Return different formats based on the route
if (event.node.req.url?.includes('atom')) {
  return feed.atom1()
} else if (event.node.req.url?.includes('json')) {
  return feed.json1()
}
return feed.rss2() // Default

Category-Specific Feeds

Create separate feeds for different content categories:

// server/routes/rss/[category].xml.ts
export default defineEventHandler(async (event) => {
  const category = getRouterParam(event, 'category')
  const articles = await getArticlesByCategory(category)
  // ... rest of the feed generation
})

Deployment Considerations

When deploying to production:

1. Update all URLs to use your production domain
2. Set up proper caching at the CDN level
3. Test the feed with actual RSS readers
4. Submit to feed directories like Feedly for better discoverability

Conclusion

Implementing an RSS feed in Nuxt is straightforward thanks to the feed package and Nuxt's server routes. RSS feeds provide a reliable way for your audience to stay updated with your content, independent of social media algorithms.

The implementation we've covered gives you a solid foundation that you can extend based on your specific needs. Whether you're building a personal blog, a news site, or a documentation site, RSS feeds are a valuable addition to your content strategy.