vue-rss-widget

vue-rss-widget

This unstyled component enables you to display any rssfeed ...anywhere in your app. It uses the RSS2JSON (https://rss2json.com/) service to transform the feed into json format. So, never forget to prefix your feed with https://api.rss2json.com/v1/api.json?rss_url= ...your feed.

While there is a free tier for this service, check other plans on RSS2JSON.

For the sake of simplicity, but also to let it be used with any UI framework, you will have to customize it with VUE SLOT api.

Here under you'll find an example of how to do it.

Check examples here under.

in order to install it in your project

npm install vue-rss-widget (or npm i vue-rss-widget)

then import the component where you need it

<template>
<div>
    <rss-widget>
      
      <template v-slot:feed_header="slotProps">
        <h2>{{slotProps.rssfeed.title}}</h2>
      </template>

      <template v-slot:feed_body="slotProps">
        <ul >
          <li v-for="(item,i) in slotProps.items" :key="i">
            <div class="card">
              <div class="card-header">
                  <h4>{{item.title}}</h4>
              </div>
              <div class="card-body">
                  {{item.description}}
              </div>
            </div>
          </li>
        </ul>
      </template>
    </rss-widget>
    </div>
</template>

<script>
import RssWidget from "vue-rss-widget"

export default {
    components: {
    RssWidget
    },
}

</script>
<style scoped>

</style>

Available props

Prop	Type	Required	Default	Description
feed	String	NO	the url of the feed	Provide the full url of the feed

Slots

Name	Params	Info
feed_header	use the vairable you want to retrieve data (ex.slotProps)	you'll get rssfeed.title, rssfeed.image, rssfeed.description, rssfeed.url
feed_body	use the vairable you want to retrieve data (ex.slotProps)	items {title,description,image,author,pubDate,categories[]}

see it on the great great Codesandbox

This example uses bootstrap-vue

Version History

• 0.1.0 First Working Version.