Making an RSS Feed for a Nuxt Website

I recently remade my website (I know, I know) and I got a surprise when getting to reimplement an rss feed because, while Astro has a module that helps with generating an rss feed, Nuxt doesn't - at least not for V3 and consequently V4. But worry not, for making one is easy enough ! What is an RSS Feed ? An RSS feed is an xml document that allows users to subscribe to updates on a website. It is an xml document that can be easily parsed to retrieve the latest published article, the website's author and more info (wikipedia entry here if you want to learn more). There are a lot of applications that will allow you to subscribe to an rss feed and even get notified when one is updated. Although RSS in its xml format is the most well-known way to consume web feeds, there are other formats that are also widely supported: json feeds atom feeds In this article I'll only be talking about RSS - and briefly mentioning atom - but all the things I'm talking about apply to all of them. The structure of an RSS Feed Let's take a look at what an rss feed looks like (you can find mine here) - specifically the one for my website First we have the main tag specifying that this xml document is an rss feed and its implementation version (in this case, version 2.0). We then get to the channel definition; this is the actual feed that will be consumed and inside of it we can find info such as its name, description, language and more. Then, for each element we want to add to our channel, we have a item tag. Each item contains a name, description, publication date, unique id and optionally the raw content of the item (in this case, a blog article). How to build one in Nuxt Luckily, Nuxt routes can be either Vue components or server endpoints - you could also use tsx, but we'll skip that for now. Server - or API - endpoints are handled by Nitro and use the classic browser Request & Response, meaning we can simply return an xml document with the correct headers and we're good to go! Let's see how to do it in detail Declaring the API route Let's start by declaring the Nitro route; in this instance I'll have it match the path, meaning I will create a file here: and fill it with the basic Nitro handlers: The RSS Feed enter the game We could write the xml document by hand, but why bother? There exist the perfect package for this: feed. It allows use to programmatically build a feed and return it in different formats. Let's see how we can integrate it with Nitro. First things first, let's install the dependency: And let's start creating the feed itself; we'll begin by setting all the basic info needed for the feed and leave the items for later: With just this, we could generate an xml document and return it with the endpoint we made above. Let's do just that We only need two other things before we have a fully functional rss feed: informing the browser of the type of data we're sending inserting the actual items in the feed The first step is simple enough, so let's get it out of the way; before returning the generated feed, let's set the header. This header tells the browser how to understand the content we'll send it back; you can see it used mostly when sending back json data - when making an api, for example. Here's how we can do it in Nitro: This tells the browser we're sending back an xml document. Adding Items to the feed Now that we have our basis covered, let's get to adding actual items to the feed. In my usecase, I needed to fetch items from a Nuxt Content collection and add it to the feed. So let's do just that: If you don't have a collection, just pretend this is an array of objects. After that, it's as simple as looping over your data array and calling the method on your feed instance: And that's all you need to do to generate an RSS feed in your Nuxt app! I also added an atom feed with the exact same logic - I just had to replace call with and you're done! Adding the Feed to the Website Once you have your server route you just need to add it to your pages and most rss readers should be able to pick it up. Let's say our rss feed lives at : if so, we'll need to add the following tag to our page's : If you're using , then this can also be done in a useHead composable hook using something like this: And you're officially done!