Trouble implementing vue pagination

Question

I want to implement pagination for my website and I found a very nice looking example that could be used with Vue.

I have no previous experience with Vue and I cannot make the demo work.

I found the pagination that I would like to use here

Here is the demo that I am trying to make work

I tried following the instructions given in the first link and I got the following code in a .html file:

<!doctype html>
<html lang="en">

<head>
    <title>vue-plain-pagination</title>
</head>

<body>

    <div id="app">
        <p>page: {{ currentPage }}</p>
        <v-pagination v-model="currentPage" :page-count="total"></v-pagination>
    </div>

    <script src="https://cdn.jsdelivr.net/npm/vue"></script>
    <script src="//unpkg.com/vue"></script>
    <script src="//unpkg.com/vue-plain-pagination"></script>
    <script>
        Vue.component('v-pagination', window['vue-plain-pagination'])

        new Vue({
            el: '#app',
            data: {
                currentPage: 5,
                total: 9,
            },
        })

    </script>

</body>

</html>

The resulting webpage from this code just has the text "page: 5" and nothing else, the pagination bar is not displayed. Do you know how I could make the code work as in the demo, I tried changing a few lines of code and looking for tutorials online but without any success.

Cathy Ha · Accepted Answer · 2019-09-04 16:57:04Z

1

Your code isn't working because the basic example is not styled. In the example you linked, it's using a stylesheet from Boostrap.

You need to include the stylesheet in order for the items to be styled.

<link href='https://stackpath.bootstrapcdn.com/bootstrap/4.1.3/css/bootstrap.min.css' rel="stylesheet">

Here's a working codepen: https://codepen.io/CodingDeer/pen/VwZrXLe

answered Sep 4, 2019 at 16:57

Cathy Ha

1,67710 silver badges18 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

Trouble implementing vue pagination

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related