Javascript is required
·
3 min read

Create an RSS Feed With Nuxt 3 and Nuxt Content v2

Create an RSS Feed With Nuxt 3 and Nuxt Content v2 Image

My portfolio website is built with Nuxt 3 and Nuxt Content v2. An RSS feed with my latest five blog posts is available here. In this article, you'll learn how to add an RSS feed to your Nuxt website.

Setup

First, let's create a new Nuxt 3 project. As the next step, we need to add the Nuxt Content v2 module to our application.

Finally, let's add some content that will be included in the RSS feed:

1├── content
2|  └── blog
3|  └── blog
4|  |   ├── article-1.md
5|  |   ├── article-2.md
6|  |   ├── article-3.md
7|  |   ├── article-4.md
8|  |   ├── article-5.md

Each .md file has this simple structure:

1---
2title: 'Article 1'
3description: 'Article 1 description'
4date: '2022-01-01'
5---
6
7Article 5 Content

The source code for this demo is available at GitHub and in this StackBlitz playground:

Add Server Route

We will be utilizing the server routes available within Nuxt, and to do so, we'll need to create the server/ directory within our app root directly.

Once this is done, we create a routes/ directory inside this and add a rss.xml.ts file. It will translate to /rss.xml:

server/routes/rss.xml.ts
1export default defineEventHandler(async (event) => {
2  const feedString = ''
3  event.res.setHeader('content-type', 'text/xml')
4  event.res.end(feedString)
5})

The next step is to query our blog posts:

server/routes/rss.xml.ts
1import { serverQueryContent } from '#content/server'
2
3export default defineEventHandler(async (event) => {
4  const docs = await serverQueryContent(event).sort({ date: -1 }).where({ _partial: false }).find()
5  const blogPosts = docs.filter((doc) => doc?._path?.includes('/blog'))
6
7  const feedString = ''
8  event.res.setHeader('content-type', 'text/xml')
9  event.res.end(feedString)
10})

Now let's add the rss library to generate the RSS XML string based on our content:

server/routes/rss.xml.ts
1import { serverQueryContent } from '#content/server'
2import RSS from 'rss'
3
4const feed = new RSS({
5  title: 'Michael Hoffmann',
6  site_url: 'https://mokkapps.de',
7  feed_url: `https://mokkapps.de/rss.xml`,
8