[Vuejs]-Vuejs-paginator example html markup

You can add content to your app by adding it to the template key:

<script>
        new Vue({
          el: '#app',
          data () {
            return {
              // The resource variable
              animals: [],
              // Here you define the url of your paginated API
              resource_url: 'http://hootlex.github.io/vuejs-paginator/samples/animals1.json'
            }
          },
          components: {
            VPaginator: VuePaginator
          },
          methods: {
            updateResource(data){
              this.animals = data
            }
          },
          template: `
             <div>
                <ul>
                   <li v-for="animal in animals">
                     {{ animal.name }}
                   </li>
                 </ul>
                 <v-paginator :resource_url="resource_url" @update="updateResource"></v-paginator>
             </div>
          `
        });            
      </script>

Something like that.

You also need an initial <div id="app"></div> in your html. This is the element where Vue will mount the app and load the content.

EDIT

The plugin uses this.$http which requires some kind of dependency that it doesn’t specify.

I have made an alteration in the following codepen and it works properly now:

https://codesandbox.io/s/competent-dream-zngzt