posts.vue

<template>
    <b-container>
        <b-row>
            <b-col md="4" v-for="(post, index) in allPosts" :key='index' :current-page="currentPage" :per-page="perPage">
                <a class="link-post" :href="'/blog/post/' + post.slug" :title="post.title" >
                    <div class="item-post">
                        <img :src="post.image" :alt="post.title" class="img-fluid img-thumbnail" >
                        <h4>{{post.title}}</h4>
                        <p>{{post.description}}</p>
                    </div>
                </a>
            </b-col>
        </b-row>
        <b-row>
            <b-col class="my-1">
                <b-pagination align="center" :total-rows="totalRows" :per-page="perPage" v-model="currentPage" class="my-0" />
            </b-col>
        </b-row>
    </b-container>
</template>

<script>

    import BootstrapVue from 'bootstrap-vue'        
    import 'bootstrap-vue/dist/bootstrap-vue.css'
    Vue.use(BootstrapVue)

    export default {
        data () {
            return {
                allPosts: [],
                currentPage: 1,
                perPage: 10,
                totalRows: 0,
            }
        },
        created() {
            this.getAllPosts()
        },
        methods: {
            getAllPosts(){
                const action = '/api/posts'
                axios.get(action).then(response => {
                    this.allPosts = response.data.data
                    this.totalRows = this.allPosts.length
                }).catch(error => {
                    console.error(error)
                })
            },
        },
    }
</script>