<div id="app">

  <div class="container">
    
    <div class="row mb-5">
    
      <div class="col-sm-12">
          
          <h1>WP REST API Search Example (Phase One)</h1>
        
          <p>Search through six of the most popular WordPress blogs at once, powered by the <a href="https://developer.wordpress.org/rest-api/">WP REST API</a> and <a href="https://vuejs.org/">Vue.JS</a>. This is a companion pen to a tutorial on the <a href="https://www.toptal.com/developers/blog">Toptal Engineering Blog</a>.</p>
        
        <p><a href="https://codepen.io/bacoords/pen/EZvPMN">Continue to Phase Two</a></p>
      
      </div>
      
    </div>
  
    <div class="row">
    
      <div class="col-md-8 offset-md-2 p-0">
  
        <div class="container" v-for="source in sources">

          <div class="row">

            <div class="container">

              <div class="row mb-5" v-for="post in source.posts">

                <div class="col-md-12">

                  <h4 v-html='post.title.rendered'></h4>

                  <h5 class="text-muted">{{source.name}}</h5>

                </div>

                <div class="col-md-12">

                  <div v-html='post.excerpt.rendered'></div>

                  <div class="text-right">

                    <a v-bind:href="post.link" target="_blank">Keep Reading</a>

                  </div>

                </div>

              </div>

            </div>

          </div>

        </div>

      </div>
    
    </div>
    
  </div>

</div>
// Basic body styles
body{
  color: #494949;
  font-family: -apple-system, BlinkMacSystemFont, 
    "Segoe UI", "Roboto", "Oxygen", 
    "Ubuntu", "Cantarell", "Fira Sans", 
    "Droid Sans", "Helvetica Neue", sans-serif !important;
  line-height: 1.4;
  margin-top: 1rem;
}

// Overrides for WordPress.org
.sharedaddy{
  display: none;
}

var app = new Vue({
  
  el : '#app',
  
  data : function(){
    return {
      sources : [
        {
          name: 'css-tricks.com',
          url : 'https://css-tricks.com/wp-json/wp/v2/posts?per_page=3',
          posts : []
        },
        {
          name: 'poststatus.com',
          url : 'https://poststatus.com/wp-json/wp/v2/posts?per_page=3',
          posts : []
        },
        {
          name: 'torquemag.io',
          url : 'https://torquemag.io/wp-api/wp/v2/posts?per_page=3',
          posts : []
        },
        {
          name: 'wordpress.org',
          url : 'https://wordpress.org/news/wp-json/wp/v2/posts?per_page=3',
          posts : []
        },
        {
          name: 'wpmudev.org',
          url : 'https://premium.wpmudev.org/blog/wp-json/wp/v2/posts?per_page=3',
          posts : []
        },
        {
          name: 'wptavern.com',
          url : 'https://wptavern.com/wp-json/wp/v2/posts?per_page=3',
          posts : []
        }
      ]
    }
  },

  methods: {
    
    // Load all posts from separate APIs
    loadPosts : function(){
      
      var self = this;
      
      self.sources.forEach(function(source, index){
        
        self.$delete(source, 'posts');

        // Get API with vue-resource     
        self.$http.get(source.url).then(function(response)  {

          self.$set(source, 'posts', response.data);

        }, function(response) {

          console.log('Error');

        });
        
      });
      
    }
    
  },
  
  mounted : function(){
    
    this.$nextTick(function(){

      // Load posts on initial page load
      this.loadPosts();
      
    });
    
  }
  
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.1.8/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/vue-resource/1.0.3/vue-resource.min.js
  3. https://cdnjs.cloudflare.com/ajax/libs/moment.js/2.17.1/moment.min.js