Vue-Resource & JSONPlaceholder Example

index.html

<div id="vueApp">
  <header>
    <div class="wrapper">
      <h1>Vue-Resource</h1>
      <a href="#" class="btn" @click.stop="loadUsers">Load Users</a>
    </div>

  </header>

  <div class="posts">
    <div class="wrapper">
      <div v-for="user in users" class="card">
        <h3>{{ user.name }}</h3>
        <p class="username">@{{ user.username }}</p>
      </div>
    </div>
  </div>


</div>

script.js

new Vue({
  el: '#vueApp',
  
  data: {
    users: []
  },
  
  methods: {
    loadUsers: function() {
      this.$http.get('http://jsonplaceholder.typicode.com/users', function(data, status, request) {
        if (status == 200) {
          this.users = data;
        }
      });
    }
  }
});

scripts

<script src="//cdnjs.cloudflare.com/ajax/libs/vue/1.0.21/vue.js"></script>
<script src="//cdnjs.cloudflare.com/ajax/libs/vue-resource/0.7.0/vue-resource.min.js"></script>

style.scss

@import url(https://fonts.googleapis.com/css?family=Open+Sans:400,300,700);

body {
    font-family: 'Open Sans', sans-serif;
    background-color: #fafafa;
}

.wrapper {
    width: 1000px;
    max-width: 90%;
    margin: 0 auto;
}

header {
    background-color: white;
    .wrapper {
        display: flex;
        align-items: center;
        justify-content: space-between;
    }
    h1 {
        text-align: center;
        font-size: 3rem;
        font-weight: 300;
        margin: 0;
        padding: 10px 0;
    }
    .btn {
        display: block;
        text-decoration: none;
        text-transform: uppercase;
        font-weight: 700;
        font-size: 0.9rem;
        padding: 12px 16px;
        background-color: #5099c9;
        color: white;
        border-radius: 4px;
        &:hover {
            background-color: #5aa7da;
        }
    }
}

.posts {
  margin-top: 50px;
  .wrapper {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    .card {
      flex-basis: 32%;
      margin-bottom: 2%;
      text-align: center;
      background-color: white;
      padding: 20px;
      border-radius: 4px;
      box-sizing: border-box;
      box-shadow: 0 2px 2px 0 rgba(0,0,0,.14);
      transition: all .3s ease;
      cursor: pointer;
      &:hover {
        box-shadow: 0 6px 6px 0 rgba(0,0,0,.14);
      }
      .username {
        font-size: 1.7rem;
        color: #5099c9;
      }
    }
  }
}

vue-resource-jsonplaceholder-example.markdown

Vue-Resource & JSONPlaceholder Example

Vue-Resource & JSONPlaceholder Example

A Pen by Timothy Olaleke on CodePen.

License.