balbla page displaying article as cards with infinite loading

web/themes/custom/materiotheme/vuejs/components/Content/Article.vue

@@ -0,0 +1,23 @@
+<template>
+  <article class="card article">
+    <header>
+      <h1 v-html="item.title"></h1>
+      <h4 class="body" v-html="item.body"></h4>
+    </header>
+    <section class="images">
+      <figure v-html="item.field_visuel"></figure>
+    </section>
+  </article>
+</template>
+
+<script>
+import { JSONAPI } from 'vuejs/api/json-axios'
+
+export default {
+  name: "Article",
+  props: ['item']
+}
+</script>
+
+<style lang="scss" scoped>
+</style>

web/themes/custom/materiotheme/vuejs/components/Content/Blabla.vue

@@ -1,17 +1,61 @@
 <template>
   <div id="blabla">
-    <h1>Blabla</h1>
+    <div class="loading" v-if="!items.length">
+      <span>Loading ...</span>
+    </div>
+    <div class="cards-list" v-else>
+      <ul>
+        <li v-for="item in items" v-bind:key="item.uuid">
+          <Article :item="item"/>
+        </li>
+      </ul>
+      <infinite-loading @infinite="getArticles">
+        <div slot="no-more">No more results</div>
+      </infinite-loading>
+    </div>
   </div>
 </template>
 
 <script>
+
+import { REST } from 'vuejs/api/rest-axios'
+import Article from 'vuejs/components/Content/Article'
+
 export default {
   name: "Blabla",
-  data: () => ({
-
-  }),
+  data() {
+    return {
+      items:[],
+      page:1
+    }
+  },
   beforeMount(){
-
+    this.getArticles()
+  },
+  methods: {
+    getArticles($state){
+      REST.get(`/blabla_rest?_format=json&page=${this.page}`, {})
+        .then(({ data }) => {
+          console.log('blabla REST: data', data)
+          if(data.length){
+            this.items = this.items.concat(data)
+            // console.log('items.length', this.items.length);
+            this.page += 1;
+            if($state)
+              $state.loaded()
+          }else{
+            if($state)
+              $state.complete()
+          }
+        })
+        .catch(( error ) => {
+            console.warn('Issue with blabla', error)
+            Promise.reject(error)
+        })
+    }
+  },
+  components: {
+    Article
   }
 }
 </script>