<section class="section">
  <div id="app">
    <ul>
      <li v-for="post in posts">
        <div class="card">
          <header class="card-header">
            <p class="card-header-title">
              {{post.title}}
            </p>
          </header>
          <div class="card-content">
            <div class="content">
              <p>{{post.body}}</p>
            </div>
          </div>
        </div>
      </li>
    </ul>
  </div>
</section>
li {
  margin-bottom: 1rem;
}
new Vue({
  el: "#app",
  data: {
    posts: []
  },
  methods: {
    getData() {
      axios.get(`https://jsonplaceholder.typicode.com/posts`).then(response => {
        this.posts = response.data;
      });
    }
  },
  created() {
    this.getData();
  }
});

External CSS

  1. https://cdnjs.cloudflare.com/ajax/libs/bulma/0.7.4/css/bulma.min.css

External JavaScript

  1. https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.8/vue.min.js
  2. https://cdnjs.cloudflare.com/ajax/libs/axios/0.18.0/axios.min.js