Go back to Examples

Pagination

CMS - Intermediate

Pagination is a common feature for collection list pages. Combined with `v-if` you can conditional render the previous/next link element.

                <ul class="flex flex-row justify-between">
    <li class="page-item" v-if="nextPage">
        <a class="btn btn-ghost btn-primary" v-bind:href="nextPage">← Newer</a>
    </li>
    <li class="page-item" v-if="previousPage">
        <a class="btn btn-ghost btn-primary" v-bind:href="previousPage">Older →</a>
    </li>
</ul>
Index number value of loop Previous and next items