Getting Started with Vue.js

Components: Gif Grid

There is still some reused code in our application, specifically the columns and column section. It would be cool if we were able to create a component for the overall grid as well.

A Grid Component

Let's create a second Vue component that will make use of our first gif-box component:

Vue.component('gif-grid', {
  props: ['gifs'],
  template: `
    <div class="columns is-multiline" v-if="gifs">
      <div class="column is-one-third" v-for="gif in gifs">

        <gif-box :gif="gif"></gif-box>


Notice that our props here is just gifs instead of trendingGifs or searchedGifs. This component is fully isolated so if we reuse it, we don't have to rename its variables.

We are also using the gif-box component inside of this one. Since we declared that globally, this component now has the ability to use that component.

Using Our Grid Component

Now we can use this in our HTML and clean up our template massively:

<!-- our template -->
<section id="app" class="section container">    

  <!-- SEARCH ========================================== -->
  <h2 class="title">Search</h2>

  <input type="text" class="input" name="query" v-model="query" @keyup="searchGifs">
  <gif-grid :gifs="searchedGifs"></gif-grid>

  <!-- TRENDING ======================================= -->
  <h2 class="title">Trending</h2>    
  <gif-grid :gifs="trendingGifs"></gif-grid>


Our entire application's HTML is now a mere 14 lines! Much easier to read also!

Like this article? Follow @chrisoncode on Twitter