Create an RSS Reader with Vue.js and JavaScript

Vue.js is an easy to use JavaScript framework that lets us create front end apps.

In this article, we’ll look at how to create an RSS reader app with Vue.js and JavaScript.

Create the Project

We can create the Vue project with Vue CLI.

To install it, we run:

npm install -g @vue/cli

with NPM or:

yarn global add @vue/cli

with Yarn.

Then we run:

vue create rss-reader

and select all the default options to create the project.

Create the RSS Reader

To create the RSS reader, we write:

<template>
  <div id="app">
    <form @submit.prevent="getRss">
      <div>
        <label> rss url</label>
        <br />
        <input v-model="rssUrl" />
      </div>
      <input type="submit" />
    </form>
    <div v-for="item of items" :key="item.title">
      <h1>{{ item.title }}</h1>
      <p>{{ item.author }}</p>
      <a :href="item.link">{{ item.link }}</a>
    </div>
  </div>
</template>

<script>
export default {
  name: "App",
  data() {
    return {
      rssUrl: "",
      items: [],
    };
  },
  methods: {
    async getRss() {
      const urlRegex = /(http|ftp|https)://[\w-]+(.[\w-]+)+([\w.,@?^=%&amp;:/~+#-]*[\w@?^=%&amp;/~+#-])?/;
      if (!urlRegex.test(this.rssUrl)) {
        return;
      }
      const res = await fetch(
        `https://api.allorigins.win/get?url=${this.rssUrl}`
      );
      const { contents } = await res.json();
      const feed = new window.DOMParser().parseFromString(contents, "text/xml");
      const items = feed.querySelectorAll("item");
      this.items = [...items].map((el) => ({
        link: el.querySelector("link").innerHTML,
        title: el.querySelector("title").innerHTML,
        author: el.querySelector("author").innerHTML,
      }));
    },
  },
};
</script>

We have a form with a form field to let us enter the RSS feed’s URL.

We bind the inputted value to the rssUrl reactive property.

In the form element, we listen to the submit event, which is triggered when we click on the input button with type submit .

The prevent modifier lets us do client-side submission instead of server-side.

Below that form, we use the v-for directive to render the RSS data, which we store in the items reactive property.

In the script, we have the getRss method.

The method first checks if rssUrl is valid.

If it is, then we call fetch to make a request to get the data from the RSS feed.

We use the allOrigins API to let us make cross-domain requests to the given feed.

We need this since cross-domain communication from the browser isn’t allows with most feeds.

The request has the contents property with the XML RSS feed content.

Then we use the parseFromString method from the DOMParser constructor to let us parse the XML string.

We pass in the XML string as the first argument.

And the 2nd argument has the content type of what we’re parsing.

It returns the XML tree DOM object.

This means we can use methods like querySelectorAll to select nodes.

Then we can select the item nodes with querySelectAll .

And then we use the spread operator to spread the items from the Node list to an array.

Next, we call map to return objects with the content of the nodes we select with querySelector .

Now in the template, the divs below the form should render with the RSS feed content.

Conclusion

We can create an RSS feed easily with Vue.js and JavaScript.