vuejs-paginator example html markup - vue.js

Question

I have a pretty daft question re: vuejs-paginator but I am having a hard time getting to run this example (I am a backend dev here).
So, I have on my head:
<script src="https://cdnjs.cloudflare.com/ajax/libs/vue/2.6.10/vue.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/vuejs-paginator/2.0.0/vuejs-paginator.js"></script>
Then as described in the page, I have:
<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
}
}
});
</script>
Now, what the F I should have in my HTML, I have no clue, and the author seems to say, I use:
<v-paginator resource_url="api/animals" #update="updateResource"></v-paginator>
but, this I think is just for the pagination. What shoud the app element contain and where is it? The docs dont seem to show this? he author then shows some random markup:
<ul>
<li v-for="animal in animals">
{{ animal.name }}
</li>
</ul>
Where should this go? Should I have an app div element?

Answer 1

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