In this tutorial, you'll learn how to make a Vue component using the bare minimum requirements. What we are building is a GitHub user card which has the following content:
Next, we copy the card component markup code listed here.
```html <div id="app"> <!-- Template from Semntic UI docs --> <div class="ui card"> <div class="image"> <img src="https://semantic-ui.com/images/avatar2/large/kristy.png"> </div> <div class="content"> <a class="header">Kristy</a> <div class="meta"> <span class="date">Joined in 2013</span> </div> <div class="description"> Kristy is an art director living in New York. </div> </div> <div class="extra content"> <a> <i class="user icon"></i> 22 Friends </a> </div> </div> </div> ```
As you can see, under the ui card class, we have an image which holds the default avatar. After this, we have a content block that holds all the details like the header, metadata, the description and finally the extra content which contains number of friends.
Write the Vue! 😎
Just before the closing `</body>` tag, add the Vue.js CDN script:
The next step is to register our component. We use Vue.component method. Let's give it a name `github-card`. We need a single prop, `username` which is of `type: String` and is made `required` by default as we need it to hit the GitHub API endpoint.
Our user details will be stored in the data() property. Next, we need to have a method to call the GitHub API, so we will use the much popular Axios library to fetch the details. Make sure you grab its CDN by including the following script:
So, inside the created hook, we use the get() method to pass the API URL. i.e. `https://api.github.com/users/${this.username}`. The response data is set to the `user` property.
We use the X-Template method to put the above HTML syntax. But first, we give it a suitable `id` of `github-card-template` making sure we also update the Vue code by adding the `template` with this `id`. Cut all the Semantic UI HTML and add it under the new X-Template script.
The GitHub API format and all the data which we can get is available on their website in the JSON format.
Let's replace the hardcoded values with the newly accessible `user` object from the API. Here are the replacements: