The Card component is the smallest component in our app. It’s going to hold the data for one single person searched on GitHub.

Create a file for it under src/components/Card.vue.

<template>

</template>

<script>
export default {
  name: 'Card'
}
</script>

This component accepts 3 props: the name of the person, the avatar_url, and the blog URL. I have taken them directly from the data coming from GitHub:

<script>
export default {
  name: 'Card',
  props: {
    blog: String,
    name: String,
    avatar_url: String
  }
}
</script>

Now let’s build the HTML of the card. We have one container div, and image and then the other data:

<template>
  <div class="card-container">
    <img alt="avatar" v-bind:src="avatar_url" />
    <div>
      <div class="name">{{ name }}</div>
      <div>{{ blog }}</div>
    </div>
  </div>
</template>

Notice how I use v-bind because the avatar_url is used as an attribute value, and Vue requires that.

Let’s add a bit of scoped CSS to style it:

<style scoped>
.card-container {
  margin: 20px;
}
.card-container img {
  width: 70px;
}
.card-container .name {
   font-weight: bold;
}
</style>

That’s it, this is the full code of our component:

<template>
  <div class="card-container">
    <img alt="avatar" v-bind:src="avatar_url" />
    <div>
      <div class="name">{{ name }}</div>
      <div>{{ blog }}</div>
    </div>
  </div>
</template>

<script>
export default {
  name: 'Card',
  props: {
    blog: String,
    name: String,
    avatar_url: String
  }
}
</script>

<style scoped>
.card-container {
  margin: 20px;
}
.card-container img {
  width: 70px;
}
.card-container .name {
   font-weight: bold;
}
</style>

Now we can go back to the CardList component and import this and make it available into the template:

<script>
import Card from './Card.vue'

export default {
  name: 'CardList',
  props: {
    cards: Array
  },
  components: {
    Card
  }
}
</script>

Next, we are going to use the v-for directive on the Card tag to repeat it for every card we have received in our props. We pass the data of each card as props to the Card component:

<template>
  <div>
    <Card v-for="(card, index) in cards" :key="index" :avatar_url=card.avatar_url :name=card.name :blog=card.blog />
  </div>
</template>

The complete code of this app is available on CodeSandbox.


Go to the next module