Embed a Medium widget in your Vue application with rss2json

3 min readAug 25, 2022

Medium is a blogging platform that offers a wide variety of topics catered to the reader. It is known to be a popular choice among content creators primarily due to its ease of use and ability to drive an audience based on content. Of course, people have started to wonder whether they can plug in their articles from Medium to their personal website in order to unify the content they deliver. While the platform did have an option to share their own widget before, they have since removed this and have left many users unhappy. Luckily, there is still a workaround this issue using RSS!

What is RSS?

Really Simple Syndication (RSS) is an XML text file generated by publishing platforms. It contains all the necessary information regarding your content, to which you can customize its presentation to your liking.

Because RSS feeds are updated in real time, we can utilize this feature in order to deliver the same feed on a separate website.

Installing the dependencies

To get started, we will first install the dependencies we need.

npm install bootstrap@4.0.0-beta popper.js jquery --save-dev

2. Update your main.js file by importing bootstrap.

import 'bootstrap/dist/css/bootstrap.css'
import 'bootstrap-vue/dist/bootstrap-vue.css'

On your selected template, import jQuery under the script tag.

import $ from 'jquery'

Creating the Promise

Since we will be requesting to fetch the data, we want to be able to wait for this process to finish before we start rendering with bootstrap. However, we have no idea how long this would take, which would cause problems if we wait for this to finish its execution (synchronous approach).

Because of this, we want to ensure that our website would load just as fine, regardless of the wait time (asynchronous approach). To prevent such mishaps from happening, we will be using Promises.

Under the local registration of the vue component, let’s create a method called initMedium().

2. Generate your rss2json link by pasting the link to your Medium feed.

https://medium.com/feed/@YOUR-USERNAAME

3. Insert the following code in the initMedium() function.

Disclaimer: The following code is a modified version of this tutorial. Huge thanks to Sabesan Sathananthan for the initial build!

4. Lastly, insert this code right below the previous block. Make sure that this is still enclosed within initMedium(). This resolves the promise and takes care of the pagination. You can control the number of articles in a page by changing page_size.

Render with Bootstrap

Place the following code inside the container you wish to put your widget.

Initialize on load

Finally, ensure that the scripts are executing on page load by calling initMedium() on mounted().

Congratulations! You have successfully placed a Medium widget on your Vue Application. This tutorial makes use of Bootstrap 4 so customizations may easily be done by adding certain classes from the documentation (e.g. text-muted).The stylizations I have applied here are heavily dependent on my website, so feel free to change them according to yours. Overall, the widget should look something like this:

Thank you so much for reading! I hope this was helpful.

References:

Find me on LinkedIn, and my website. Let’s connect!