·
3 min read
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.mdEach .md file has this simple structure:
1---
2title: 'Article 1'
3description: 'Article 1 description'
4date: '2022-01-01'
5---
6
7Article 5 ContentThe 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})
9
10const docs = await serverQueryContent(event).sort({ date: -1 }).where({ _partial: false }).find()
11const blogPosts = docs.filter((doc) => doc?._path?.includes('/blog'))
12
13for (const doc of blogPosts) {
14 feed.item({
15 title: doc.title ?? '-',
16 url: `https://mokkapps.de${doc._path}`,
17 date: doc.date,
18 description: doc.description,
19 })
20}
21
22const feedString = feed.xml({ indent: true })
23event.res.setHeader('content-type', 'text/xml')
24event.res.end(feedString)When using nuxt generate, you may want to pre-render the feed since the server route won't be able to run on a static hosting.
We can do this by using the nitro.prerender option in nuxt.config:
nuxt.config.ts
1import { defineNuxtConfig } from 'nuxt'
2
3// https://v3.nuxtjs.org/api/configuration/nuxt.config
4export default defineNuxtConfig({
5 modules: ['@nuxt/content'],
6 nitro: {
7 prerender: {
8 routes: ['/rss.xml'],
9 },
10 },
11 content: {
12 // https://content.nuxtjs.org/api/configuration
13 },
14})If we now navigate to /rss.xml, we get our generated RSS feed:
1<rss xmlns:dc="http://purl.org/dc/elements/1.1/"
2 xmlns:content="http://purl.org/rss/1.0/modules/content/"
3 xmlns:atom="http://www.w3.org/2005/Atom" version="2.0">
4 <channel>
5 <title>
6 <![CDATA[ Michael Hoffmann ]]>
7 </title>
8 <description>
9 <![CDATA[ Michael Hoffmann ]]>
10 </description>
11 <link>https://mokkapps.de</link>
12 <generator>RSS for Node</generator>
13 <lastBuildDate>Sun, 14 Aug 2022 18:14:16 GMT</lastBuildDate>
14 <atom:link href="https://mokkapps.de/rss.xml" rel="self" type="application/rss+xml"/>
15 <item>
16 <title>
17 <![CDATA[ Article 5 ]]>
18 </title>
19 <description>
20 <![CDATA[ Article 5 description ]]>
21 </description>
22 <link>https://mokkapps.de/blog/article-5</link>
23 <guid isPermaLink="true">https://mokkapps.de/blog/article-5</guid>
24 <pubDate>Thu, 05 May 2022 00:00:00 GMT</pubDate>
25 </item>
26 <item>
27 <title>
28 <![CDATA[ Article 4 ]]>
29 </title>
30 <description>
31 <![CDATA[ Article 4 description ]]>
32 </description>
33 <link>https://mokkapps.de/blog/article-4</link>
34 <guid isPermaLink="true">https://mokkapps.de/blog/article-4</guid>
35 <pubDate>Mon, 04 Apr 2022 00:00:00 GMT</pubDate>
36 </item>
37 <item>
38 <title>
39 <![CDATA[ Article 3 ]]>
40 </title>
41 <description>
42 <![CDATA[ Article 3 description ]]>
43 </description>
44 <link>https://mokkapps.de/blog/article-3</link>
45 <guid isPermaLink="true">https://mokkapps.de/blog/article-3</guid>
46 <pubDate>Thu, 03 Mar 2022 00:00:00 GMT</pubDate>
47 </item>
48 <item>
49 <title>
50 <![CDATA[ Article 2 ]]>
51 </title>
52 <description>
53 <![CDATA[ Article 2 description ]]>
54 </description>
55 <link>https://mokkapps.de/blog/article-2</link>
56 <guid isPermaLink="true">https://mokkapps.de/blog/article-2</guid>
57 <pubDate>Wed, 02 Feb 2022 00:00:00 GMT</pubDate>
58 </item>
59 <item>
60 <title>
61 <![CDATA[ Article 1 ]]>
62 </title>
63 <description>
64 <![CDATA[ Article 1 description ]]>
65 </description>
66 <link>https://mokkapps.de/blog/article-1</link>
67 <guid isPermaLink="true">https://mokkapps.de/blog/article-1</guid>
68 <pubDate>Sat, 01 Jan 2022 00:00:00 GMT</pubDate>
69 </item>
70 </channel>
71</rss>If you liked this article, follow me on Twitter to get notified about new blog posts and more content from me.
Alternatively (or additionally), you can also subscribe to my newsletter.
How to Create a Custom Code Block With Nuxt Content v2
Code blocks are essential for blogs about software development. In this article, I want to show you how can define a custom code block component in Nuxt Content v2 with the following features:
Building a Polite Newsletter Popup With Nuxt 3
This year I launched a free eBook with 27 helpful tips for Vue developers for subscribers of my weekly Vue newsletter. For marketing purposes, I showed a popup on the landing page of my portfolio page each time a user visited my site. I was aware that users probably could get annoyed by that popup. Thus I added a "Don't show again" button to that popup. I thought I solved the problem!
