Jan 3, 2023

RSS with Nuxt 3 and Nuxt Content

In this guide I'll show you how to implement a dynamic rss feed with Nuxt 3 and Nuxt Content for your website.

This guide is split up into the following steps:

  1. Add a sorting criteria to your content files
  2. Create the rss feed with your latest content
  3. Add discoverability for rss readers

You need a running Nuxt 3 application with Nuxt Content to follow along.

Add a sorting criteria

We use Front-Matter to add a timestamp to our markdown files. This is used to sort the files and limit the rss feed to only contain the latest ones.

---writtenOn: '2023-01-03'---# Your blog post continues here

Generate the rss feed

We are using feed to generate our rss file.

npm install -D feed

Create a server route server/routes/rss.xml.js to serve the rss.xml.

import { Feed } from 'feed'import { serverQueryContent } from '#content/server'const basePath = 'https://www.felixseemann.de'export default defineEventHandler(async (event) => {  // Query the 5 latest blog posts.  // Limit the data to only contain necessary information for the feed.   const docs = await serverQueryContent(event, {    only: ['title', 'description', '_path', 'writtenOn'],    sort: { writtenOn: -1 },    limit: 5,  }).find()  // Create the feed  const feed = new Feed({    title: 'Felix Seemann',    description: 'Software engineering blog.',    id: basePath,    link: basePath,    language: 'en',    favicon: basePath + '/favicon.ico',    copyright: 'All rights reserved 2023, Felix Seemann',    feedLinks: {      rss: basePath + '/rss.xml',    },    author: {      name: 'Felix Seemann',      email: 'fseemann@mail.de',      link: basePath,    },  })  // Add the feed items  docs.forEach((doc) => {    feed.addItem({      title: doc.title,      id: basePath + doc._path,      link: basePath + doc._path,      description: doc.description,      date: new Date(doc.writtenOn),    })  })  return feed.rss2()})

Tell nitro to prerender your route in the nuxt.config.ts. This is required for static content serving.

export default defineNuxtConfig({  nitro: {    prerender: {      routes: ['/rss.xml'],    },  },})

Add discoverability for rss readers

Add a <link> tag to your html head by modifying the head in app.vue to provide the rss url. This will allow rss readers to discover and subscribe to your rss feed.

<script setup>useHead({  link: [    {      rel: "alternate",      type: "application/rss+xml",      title: "Felix Seemann",      href: "https://www.felixseemann.de/rss.xml"    }  ]})</script>

That's it

I pieced this information together while implementing rss for this page and thought it might be helpful to have all necessary steps in one place as the documentation on Nuxt 3 and its modules is sparse on this topic.