Create an RSS feed with Nuxt 3
Tags: nuxt, webdev, javascript, vue
Published: 2023-02-25 00:08:11

---
title: Create an RSS feed with Nuxt 3
published: true
date: 2023-02-24 00:01:33 UTC
tags: nuxt,webdev,javascript,vue
canonical_url: https://blog.rrrm.co.uk/post/creating-a-rss-feed-with-nuxt-3
---

### What is RSS? 

An RSS feed is a structured file format used to publish frequently updated content such as blog posts, news articles, and podcasts. It allows readers to easily access and subscribe to new content without having to visit the website directly. RSS feeds are important because they save time and provide a convenient way to keep up-to-date with multiple sources of information from a single platform. They are commonly used by publishers, bloggers, and news outlets to distribute content to their audiences.

### Benefits of having RSS feed

Creating an RSS feed for your website can provide several benefits, including:

1. Convenience: RSS feeds allow readers to easily access and stay updated on multiple sources of content in one place without having to visit each website individually. This saves time and provides a more convenient user experience.
2. Increased engagement: RSS can help increase engagement with your audience by allowing readers to share your content on social media or other platforms easily. This can lead to more traffic and greater visibility for your website.
3. Search engine optimization: RSS feeds can help improve your website's search engine rankings by providing a steady stream of fresh, relevant content. This can help increase your website's visibility and drive more traffic to your site.


### Setting up a Nuxt 3 project

In this tutorial I will show you how to generate an RSS feed in nuxt 3 using server routes, this should provide a good insight on how the new server feature in nuxt 3 works with nitro

lest create a new project 

`npx nuxi init nuxt3-rss`

cd into `nuxt3-rss`  install depencies,  we also need to add the [rss](https://www.npmjs.com/package/rss) package

`npm i rss && npm i -D @types/rss `

#### Creating a server  route for your RSS feed
 
 Nuxt 3 is powered by a new server engine, [Nitro.](https://nitro.unjs.io/)

the server directory works like the page directory with a file-based routing system for your API routes

>Nuxt automatically scans files inside the ~/server/api, ~/server/routes, and ~/server/middleware directories to register API and server handlers with HMR support.

```
server/
  api/         
    test.ts    <-- /api/test
  hello.ts     <-- /hello
  ```
 
 for this tutorial, we are going to focus on the server routes instead of the API
 
 >Files inside the ~/server/api are automatically prefixed with /api in their route. For adding server routes without /api prefix, you can instead put them into ~/server/routes directory.
 
for example

```javascript
// server/routes/hello.ts
export default defineEventHandler(() => 'Hello World!')
```
Given the example above, the `/hello` route will be accessible at `http://localhost:3000/hello.`

We need to create a `server` directory at the root of the project and a routes folder inside server directory

```bash
mkdir server
cd server
mkdir routes
```
inside server/routes create rss.ts file

```javascript
// server/routes/rss.ts
export default defineEventHandler(() => 'RSS page!')
```
navigate to `http://localhost:3000/rss` and make sure everything is working

here's an RSS example that we are going to try dynamically render

```html
<?xml version="1.0" encoding="UTF-8"?>
<rss version="2.0">
  <channel>
    <title>My Website</title>
    <link>http://www.example.com/</link>
    <description>My website's RSS feed</description>
    <lastBuildDate>Tue, 22 Feb 2023 12:00:00 GMT</lastBuildDate>
    <item>
      <title>Article Title</title>
      <link>http://www.example.com/article1</link>
      <description>This is the first article on my website.</description>
      <pubDate>Tue, 21 Feb 2023 12:00:00 GMT</pubDate>
    </item>
    <item>
      <title>Another Article Title</title>
      <link>http://www.example.com/article2</link>
      <description>This is the second article on my website.</description>
      <pubDate>Mon, 20 Feb 2023 12:00:00 GMT</pubDate>
    </item>
  </channel>
</rss>
```
In this example, the `rss` tag specifies the version of the RSS format used (in this case, version 2.0). The `channel` tag contains information about the RSS feed, such as the website's title, description, and link. Each `item` tag represents an individual article in the feed, with a title, link, description, and publication date.

Our object is to fetch a list of items from an API, loop over each article and include them in the `item` tag in our RSS fed

I'm going to make use of dev.to API to get a list of my arctiles


```javascript

// server/routes/rss.ts

import RSS from 'rss';

export default defineEventHandler(async (event) => {
  // wrap everything in a try catch block
  try {
    // fetch data from dev.to
    const response = await fetch(
      'https://dev.to/search/feed_content?per_page=15&page=0&user_id=138553&class_name=Article&sort_by=published_at&sort_direction=desc&approved='
    );

    // throw an error if the response is not ok
    if (!response.ok) {
      throw new Error(response?.status);
    }

    /*
      await for response.json()
      the api returns an object with the result key and result contains all our articles inside an array
      assign result to posts
     */
    const {result:posts} = await response.json();

    // create new rss feed this will be our channel tag with website title and url
    const feed = new RSS({
      title: 'Rafael Magalhaes',
      site_url: 'https://dev.to/rafaelmagalhaes', // link to your website/blog
      feed_url: `https://blog.rrrm.co.uk/rss`, // path to your rss feed
    });
    // loop over each posts
    for (const post of posts) {
      // add item tag to our rss feed with correct data
      feed.item({
        title: post.title, // title from post to item title
        url: `https://dev.to/${post.path}`, // full path to where our article is hosted
        //description: '', // dev.to APIs doesn't return a description, if you have one you can add it here
        date: post.published_at_int, // date post was created
        categories: post.tag_list, // list of tags
      });
    }
    const feedString = feed.xml({ indent: true }); //This returns the XML as a string.

    event.node.res.setHeader('content-type', 'text/xml'); // we need to tell nitro to return this as a xml file
    event.node.res.end(feedString); // send the HTTP response
  } catch (e) {
    // return an error
    return e;
  }
});

```

Now if we navigate to  `http://localhost:3000/rss` It should return an xml file with a list of our articles

![](https://sli1n332.directus.app/assets/c04c7809-3da4-4d16-a6e7-fee1b660239a)


you can find the repository here: https://github.com/rafaelmagalhaes/nuxt3-rss