WordPress API - how to fetch and paginate posts with Vue.js

readme.md

WordPress API - how to fetch and paginate posts with Vue.js

Youtube video about that: https://www.youtube.com/watch?v=sBpKV82rCBE

app.js

import Vue from 'vue';
import posts from './components/posts.vue';

window.axios = require('axios');
window.Vue = Vue;

Vue.component('posts', posts);

const app = new Vue({
    el: '#app',
});

index.php

<?php get_header(); ?>

<div id="app">
    <posts></posts>
</div>

<?php get_footer(); ?>

pagination.vue

<template>
    <nav class="pagination">
        <span class="page-stats">{{pagination.from}} - {{pagination.to}} of {{pagination.total}}</span>
        <a v-if="pagination.prevPage" @click="$emit('prev')" class="button is-small pagination-previous">
            Prev
        </a>
        <a class="button is-small pagination-previous" v-else disabled>
            Prev
        </a>

        <a v-if="pagination.nextPage" @click="$emit('next')" class="button is-small pagination-next">
            Next
        </a>
        <a class="button is-small pagination-next" v-else disabled>
            Next
        </a>
    </nav>
</template>

<script>
    export default {
        props: ['pagination'],
    }
</script>

posts.vue

<template>
    <div>
        <table class="table is-bordered">
            <thead>
                <tr>
                    <th>Title</th>
                    <th>Posted at</th>
                </tr>
            </thead>
            <tbody>
                <tr v-for="post in posts">
                    <td>{{post.title.rendered}}</td>
                    <td>{{post.date_gmt}}</td>
                </tr>
            </tbody>
        </table>
        <pagination :pagination="pagination"
                    @prev="--postsData.page; getPosts();"
                    @next="postsData.page++; getPosts();">
        </pagination>
    </div>

</template>
  
<script>
    import pagination from './pagination.vue'
    export default {
        mounted() {
            this.getPosts();
        },
        components: {
            'pagination': pagination
        },
        data() {
            return {
                postsUrl: 'http://yourdomain/wp-json/wp/v2/posts',
                posts: [],
                postsData: {
                    per_page: 10,
                    page: 1
                },
                pagination: {
                    prevPage: '',
                    nextPage: '',
                    totalPages: '',
                    from: '',
                    to: '',
                    total: '',
                },
            }
        },
        methods: {
            getPosts() {
                axios.get(this.postsUrl, {params: this.postsData})
                    .then((response) => {
                        this.posts = response.data;
                        this.configPagination(response.headers);
                    })
                    .catch( (error) => {
                        console.log(error);
                    });
            },
            configPagination(headers) {
                this.pagination.total = +headers['x-wp-total'];
                this.pagination.totalPages = +headers['x-wp-totalpages'];
                this.pagination.from = this.pagination.total ? ((this.postsData.page - 1) * this.postsData.per_page) + 1 : ' ';
                this.pagination.to = (this.postsData.page * this.postsData.per_page) > this.pagination.total ? this.pagination.total : this.postsData.page * this.postsData.per_page;
                this.pagination.prevPage = this.postsData.page > 1 ? this.postsData.page : '';
                this.pagination.nextPage = this.postsData.page < this.pagination.totalPages ? this.postsData.page + 1 : '';
            }
        }
    }
</script>