materio-d9/web/themes/custom/materiotheme/vuejs/components/Pages/Blabla.vue

<template>
  <div id="blabla">
    <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.nid">
          <ArticleCard :item="item"/>
        </li>
      </ul>
      <infinite-loading @infinite="nextPage">
        <div slot="no-more">No more articles</div>
      </infinite-loading>
    </div>
  </div>
</template>

<script>

import ArticleCard from 'vuejs/components/Content/ArticleCard'
import { mapState, mapActions } from 'vuex'

export default {
  name: "Blabla",
  // data() {
  //   return {
  //     items:[],
  //     page:0
  //   }
  // },
  computed: {
    ...mapState({
      items: state => state.Blabla.items
    })
  },
  created(){
    if(!this.items.length)
      this.getItems()
  },
  methods: {
    ...mapActions({
      getItems: 'Blabla/getItems',
      nextPage: 'Blabla/nextPage'
    })
  },
  components: {
    ArticleCard
  }
}
</script>
<style lang="scss" scoped>
</style>