Integrate Github Repositories Into Your Personal Site With VueJS
Last year, more or less around this time, I was considering the idea of having my own website, mainly to have a portfolio of my personal projects and a small blog.
Shortly after I finally had my site, created with Gatsby and hosted on Netlify, in which I used to add my public projects on Github and the new posts that I was going to write.
Going back to about a month ago, I started noticing some problems with my current site, I first wanted to improve it graphically and simplify it, i wanted to use VueJS, mainly for learning purposes, and above all I wanted to automate the process of adding articles and projects, using the Github API and Medium RSS Feed.
And it is precisely this point that i want to address in this article, how to integrate your Github projects into your personal site using VueJS, we will deal with Medium RSS in a second part.
You can find my website at www.alexpagnotta.com and its source code at this link https://github.com/AlexPagnotta/AlexPagnottaSite.
Project Creation
The first thing to do is create a project, for this post I’m going to create a very simple VueJS project, leaving aside the graphic aspect, you can eventually find the details on the graphic part in the repository of my site, in which I use the CSS framework [Bulma] (https://bulma.io).
To create the project go to the folder where you want to save the files, and from the terminal execute the following command, replacing “project-name” with the name you want to give to the project:
vue create project-name
At this point, move inside the folder that has been created, and using the command below you can start the site:
npm run serve
Setup and installation of libraries
The newly created project is a VueJS default project, so we must delete the “Helloworld” placeholder component that is created automatically, to do that we just need to go to the components folder and delete the “HelloWorld.vue” file, and with it the related references in the “App.Vue” file, as shown below.
The last step is to install [Axios] (https://github.com/axios/axios), a popular library for making HTTP calls, we will use it to get the data from the Github API.
To install it, just run the following command:
npm install axios
Component Creation and API Integration
At this point we are ready to start creating the components we need and the logic for the API integration.
The first component that we are going to create will represent the single Github project, to create it go to the components folder and add a new file called “Item.vue”,with the following code:
We can see that there are three main tags, Template, Script and Style, which divide the component into three sections.
The Template section contains the html code that structures our component, this presents an image, a title, a list of tags, and a link, these data will be passed to us by a parent component, through props, we can see the definition in the section enclosed by Scripts tags.
Finally we find the style, the component’s CSS code, in the Style section.
We now have the “Item” component ready to receive data and to be displayed, to do this we need another component, a container, we can call it “GithubProjectsContainer.vue”, which we are going to insert in the components folder with the code below:
Let’s analyze the component code, in the Scripts section we first find the various imports, in this case we are importing the Axios library, installed previously, and our Item component, which we also add in the definition of the child components.
The “data()” and “mounted()“ methods store the application logic for our component, in data () we initialize 3 variables, “data” which contain the objects returned by the Github api, “isLoading”, a boolean that tells us if the component is loading data or not, and finally HasError, always a boolean that indicates if there has been some type of error.
In the “mounted()” method we execute the actual call to the Github api through Axios, we execute “axios.get()” and we pass the api endpoint and an “Accept” header as parameters.
Being an asynchronous call, “axios.get()” will return us a promise that we will have to manage through the “then”, “catch” and “finally” methods, the “finally” method will be called regardless of the result, and will indicate that the loading has finished setting “isLoading” to false, “catch” will be called in case of an error, instead the method “then” will be executed if the call is successful.
In this last case, a “response” variable containing our projects will be returned, which I then filter by name, to show only the 3 repositories I need.
In the Template section we will go to display our projects, while managing any errors or loading through the conditional rendering of Vue.
In fact, we will show an error message or a loading indicator if one of the isLoading or HasError variables is True, using the “v-if” condition.
If, on the other hand, both are false, and the call was therefore successfully completed, we scroll through the projects contained in data with a for loop through “v-for”, and for each one we render our “Item” component.
Please Note: Unfortunately, Github does not allow us to obtain the image of the repository contained in the Readme.md file, to overcome this problem I have inserted the images with the path “project-name.png” in the project assets folder, so I can associate them with each project, and display them using “require(path)”.
Conclusion and Result
The last step is to add the newly created component in “App.vue”, and finally start the site, if everything went according to plan you should have the following result.
