Getting Started with Vue.js: Lesson 20 of 25

Components: Gif Grid

Up Next

Registering Components

Autoplaying in 7 seconds!

Cancel

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>

      </div>
    </div>
  `
});

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.

Table of Contents

    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>
    
    </section>

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

    Chris Sevilleja

    176 posts

    Founder of Scotch.io. Google Developer Expert in Web Technologies. Slapping the keyboard until something good happens.