--- title: Create a component & fetch GitHub user details with Vue.js & Semantic UI 👩‍💻 | daily.dev description: In this tutorial, you'll learn how to make a Vue component using the bare minimum requirements. Explore practical developer news, tutorials, and tools read by millions of developers worldwide. canonical: https://daily.dev/blog/create-a-component-fetch-github-user-details-with-vue-js-semantic-ui/ og:type: article og:url: https://daily.dev/blog/create-a-component-fetch-github-user-details-with-vue-js-semantic-ui/ og:title: Create a component & fetch GitHub user details with Vue.js & Semantic UI 👩‍💻 | daily.dev og:description: In this tutorial, you'll learn how to make a Vue component using the bare minimum requirements. Explore practical developer news, tutorials, and tools read by millions of developers worldwide. og:image: https://media.daily.dev/image/upload/s--O61y7PKm--/f_auto,q_auto/v1/recruiter-landing/5f22a57f297da31a6603d110_DEV_to_20cover_20image_ffddea0ef0?_a=BAMAMiB80 og:site_name: daily.dev og:locale: en_US article:published_time: 2020-07-30 article:modified_time: 2026-05-15T14:26:35.323Z article:author: Vaibhav Khulbe twitter:card: summary_large_image twitter:site: @dailydotdev twitter:creator: @dailydotdev twitter:title: Create a component & fetch GitHub user details with Vue.js & Semantic UI 👩‍💻 | daily.dev twitter:description: In this tutorial, you'll learn how to make a Vue component using the bare minimum requirements. Explore practical developer news, tutorials, and tools read by millions of developers worldwide. twitter:image: https://media.daily.dev/image/upload/s--O61y7PKm--/f_auto,q_auto/v1/recruiter-landing/5f22a57f297da31a6603d110_DEV_to_20cover_20image_ffddea0ef0?_a=BAMAMiB80 --- 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: - The profile picture. - GitHub profile name. - Joining date. - User bio. - The number of followers. All in all, it will look something like this: ![Semantic UI Card](https://uploads-ssl.webflow.com/5e0f1144930a8bc8aace526c/5f21cf7284bc81f968afe89e_kd0pfhpg1h5i7xxuyclx.jpeg) If you're familiar with [Semantic UI](https://semantic-ui.com/), this is exactly what it's [card component](https://semantic-ui.com/views/card.html) is like. You'll get to know how to fetch data from the GitHub API endpoint and how to connect it with the [Vue instance](https://vuejs.org/v2/guide/instance.html). Let's jump straight in! ![Jump GIF](https://uploads-ssl.webflow.com/5e0f1144930a8bc8aace526c/5f21cf72aa2dd642b00775de_giphy.gif) _Is this a jump or a facepalm?_ ## Prerequisites 🙃 Attention to extreme new-comers in web development! This tutorial is for those who have worked on: - [HTML](https://developer.mozilla.org/en-US/docs/Web/HTML) - [CSS](https://developer.mozilla.org/en-US/docs/Glossary/CSS) - [JavaScript](https://developer.mozilla.org/en-US/docs/Web/JavaScript) - [Vue.js](https://vuejs.org/) - basic component creation, knowledge on instances, props etc. ## Write the HTML markup 😌 Inside the \`index.html\` file, you need to have the root \`app\` element \`div\` which will help Vue to mount it on the webpage. Before we move any further, add the following Semantic UI CSS CDN: \`https://cdnjs.cloudflare.com/ajax/libs/semantic-ui/2.4.1/semantic.min.css\` Next, we copy the card component markup code listed [here](https://semantic-ui.com/views/card.html#card). \`\`\`html
       
     
             
     
       Kristy        
         Joined in 2013        
       
         Kristy is an art director living in New York.        
     
     
                           22 Friends              
   
 
\`\`\` As you can see, under the ui card class, we have an [image](https://semantic-ui.com/elements/image.html) which holds the default avatar. After this, we have a [content block](https://semantic-ui.com/views/card.html#content-block) that holds all the details like the [header](https://semantic-ui.com/elements/header.html), [metadata](https://semantic-ui.com/views/card.html#metadata), the [description](https://semantic-ui.com/views/card.html#description) and finally the [extra content](https://semantic-ui.com/views/card.html#extra-content) which contains number of friends. ## Write the Vue! 😎 Just before the closing \`\` tag, add the Vue.js CDN script: \`\` Make a new \`main.js\` file under the same project folder, [link it with your HTML](https://www.w3schools.com/tags/att_script_src.asp), and then create the [Vue instance](https://vuejs.org/v2/guide/instance.html). ### Code the component Create the new component template at the top of the \`body\`. This is where the card will render: \`\` The next step is to register our component. We use [Vue.component](https://vuejs.org/v2/api/#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()](https://vuejs.org/v2/api/#data) property. Next, we need to have a method to call the GitHub API, so we will use the much popular [Axios library](https://github.com/axios/axios) to fetch the details. Make sure you grab its CDN by including the following script: \`https://unpkg.com/axios/dist/axios.min.js\` Now, this [AJAX](https://developer.mozilla.org/en-US/docs/Web/Guide/AJAX/Getting_Started) call will be done in two places: - First, once the component is created. - Second, before it's mounted to the document. Checkout [this lifecycle diagram](https://vuejs.org/v2/guide/instance.html#Lifecycle-Diagram) for better context. So, inside the [created](https://vuejs.org/v2/api/#created) hook, we use the [get()](https://github.com/axios/axios#axiosgeturl-config) method to pass the API URL. i.e. \`https://api.github.com/users/${this.username}\`. The [response](https://github.com/axios/axios#note-commonjs-usage) data is set to the \`user\` property. Here's the code: \`\`\`js Vue.component('github-card', {    props: {        username: {            type: String,            required: true        }    },    data() {        return {            user: {}        };    },    async created() {        const response = await axios.get(\` https: //api.github.com/users/${this.username}\`);        this.user = response.data;    } }); new Vue({    el: '#app', }); \`\`\` ### Create the template We use the [X-Template](https://vuejs.org/v2/guide/components-edge-cases.html#X-Templates) 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](https://api.github.com/) in the JSON format. Let's replace the hardcoded values with the newly accessible \`user\` object from the API. Here are the replacements: - -> - "Kristy" -> \`{{ user.name }}\` - "Joined in 2013" -> \`Joined in {{ user.created\_at }}\` - "Kristy is an art director living in New York." -> \`{{ user.bio }}\` - "22 Friends" -> \`{{ user.followers }} Followers\` Remember that we're using the [moustache format](https://vuejs.org/v2/guide/syntax.html#Text) for the JavaScript code. Here's the new code: \`\`\`html \`\`\` As you can see, I've added links in between the name and the follower count using the [:href](https://vuejs.org/v2/guide/syntax.html#Arguments) argument. Refresh the browser page and there you have it! You've just created a GitHub component in Vue and styled it with Storybook. How cool! Here's what [@nickytonline](https://dev.to/nickytonline)'s GitHub card looks like: 😉 ![Nick Taylor's Github card](https://uploads-ssl.webflow.com/5e0f1144930a8bc8aace526c/5f21cf7270e05410f68efc39_vk6fwrcx9rno8ax1rxrb.jpeg) ## Where to next? 🤔 - Make these cards for multiple users! - Use GitHub data to get more info - Use Semantic UI's other components to display the data. _Thanks for reading, I appreciate it! Have a good day. (✿◕‿◕✿)_ > Who here can relate? 😓 > > Documentation is rarely closed as duplicate, just saying... 😉 > > Find Microsoft Docs this way: [https://t.co/eq5hQaVjPn](https://t.co/eq5hQaVjPn) > > Image source: [https://t.co/gnY04c5qul](https://t.co/gnY04c5qul)[#DevHumour](https://twitter.com/hashtag/DevHumour?src=hash&ref_src=twsrc%5Etfw) [#Programming](https://twitter.com/hashtag/Programming?src=hash&ref_src=twsrc%5Etfw) [#Developer](https://twitter.com/hashtag/Developer?src=hash&ref_src=twsrc%5Etfw) [#ICYMI](https://twitter.com/hashtag/ICYMI?src=hash&ref_src=twsrc%5Etfw) [pic.twitter.com/KIrCbhE7Q5](https://t.co/KIrCbhE7Q5) > > — Microsoft Developer UK (@msdevUK) [July 26, 2020](https://twitter.com/msdevUK/status/1287412113519128577?ref_src=twsrc%5Etfw) #### [📫 Subscribe to my weekly developer newsletter 📫](https://mailchi.mp/f59beeac6b9b/devupdates) ```json {"@context":"https://schema.org","@graph":[{"@type":"Organization","@id":"https://daily.dev/#organization","name":"daily.dev","url":"https://daily.dev","logo":{"@type":"ImageObject","url":"https://daily.dev/og-image.png?v=a830cdf1","width":1200,"height":630},"sameAs":["https://twitter.com/dailydotdev","https://www.linkedin.com/company/dailydotdev","https://github.com/dailydotdev","https://www.instagram.com/dailydotdev"]},{"@type":"WebSite","@id":"https://daily.dev/#website","url":"https://daily.dev","name":"daily.dev","description":"Free, personalized developer news aggregator. Stay on top of software development news, AI coding tools, and web dev - curated daily from trusted sources.","publisher":{"@id":"https://daily.dev/#organization"},"potentialAction":{"@type":"SearchAction","target":{"@type":"EntryPoint","urlTemplate":"https://daily.dev/search?q={search_term_string}"},"query-input":"required name=search_term_string"}},{"@type":"WebPage","@id":"https://daily.dev/blog/create-a-component-fetch-github-user-details-with-vue-js-semantic-ui/","url":"https://daily.dev/blog/create-a-component-fetch-github-user-details-with-vue-js-semantic-ui/","name":"Create a component & fetch GitHub user details with Vue.js & Semantic UI 👩‍💻 | daily.dev","description":"In this tutorial, you'll learn how to make a Vue component using the bare minimum requirements. Explore practical developer news, tutorials, and tools read by millions of developers worldwide.","inLanguage":"en-US","isPartOf":{"@id":"https://daily.dev/#website"}},{"@type":"Article","@id":"https://daily.dev/blog/create-a-component-fetch-github-user-details-with-vue-js-semantic-ui/#article","headline":"Create a component & fetch GitHub user details with Vue.js & Semantic UI 👩‍💻","url":"https://daily.dev/blog/create-a-component-fetch-github-user-details-with-vue-js-semantic-ui/","datePublished":"2020-07-30","dateModified":"2026-05-15T14:26:35.323Z","isPartOf":{"@id":"https://daily.dev/#website"},"publisher":{"@id":"https://daily.dev/#organization"},"mainEntityOfPage":{"@type":"WebPage","@id":"https://daily.dev/blog/create-a-component-fetch-github-user-details-with-vue-js-semantic-ui/"},"description":"In this tutorial, you'll learn how to make a Vue component using the bare minimum requirements. Explore practical developer news, tutorials, and tools read by millions of developers worldwide.","image":{"@type":"ImageObject","url":"https://media.daily.dev/image/upload/s--O61y7PKm--/f_auto,q_auto/v1/recruiter-landing/5f22a57f297da31a6603d110_DEV_to_20cover_20image_ffddea0ef0?_a=BAMAMiB80"},"author":{"@type":"Person","name":"Vaibhav Khulbe","url":"https://app.daily.dev/vaibhavkhulbe"},"potentialAction":{"@type":"ReadAction","target":"https://daily.dev/blog/create-a-component-fetch-github-user-details-with-vue-js-semantic-ui/"}},{"@type":"BreadcrumbList","itemListElement":[{"@type":"ListItem","position":1,"name":"Home","item":"https://daily.dev/"},{"@type":"ListItem","position":2,"name":"Blog","item":"https://daily.dev/blog/"},{"@type":"ListItem","position":3,"name":"Vue.js","item":"https://daily.dev/categories/vue-js/"},{"@type":"ListItem","position":4,"name":"Create a component & fetch GitHub user details with Vue.js & Semantic UI 👩‍💻","item":"https://daily.dev/blog/create-a-component-fetch-github-user-details-with-vue-js-semantic-ui/"}]}]} ```