When searching across the web for any sort of API or resource I could utilise, I stumbled across the News API. It’s free for non-commercial and open source projects. My website is personalised to my region and designed just for my use, and so News API was a perfect fit.

To begin, I spun up a new Vue instance.

vue init webpack news_api

The first thing I did was change the default Hello page in the router, although this wasn’t needed.

I then added BootstrapVue to the project, to speed up the development process.

I added two more packages as well, Truncate and Axios. Truncate is used to cap the amount of text that is displayed in the description box, and Axios is used for making the requests to the News API.

In my Homepage.vue file, I added two methods and a piece of data. The methods are to retrieve the data, which is called on load, and the truncate function which is called when the article is displayed on the screen.

The axios request is very simple. The News API returns an object containing key information, such as the amount of articles returned, and an object called Articles that contains an array of the 20 top articles in that instance. I have then taken the articles and assigned them to a local variable, which is looped through in the template, with each article being displayed as a separate card. As the assignment shows, each article contains a title, image, and description. It looks like so when run: