How can I include Paginator.vue in another component?

Question

Vue.js

I have a BlogFeed.vue component. This component renders paginated posts. How can I split this component into two components? BlogFeed.vue would like to include Paginator.vue.
This is my BlogFeed.vue with pagination.

<template>
    <div>
        <div v-for="post in displayPosts" :key="post.id">
            <b-card>
                <h3><router-link :to="{ name: 'post_detail', params: {id: post.id} }">{{ post.title }}</router-link></h3>
                {{ post.body }}
            </b-card>
        </div>
        <b-btn variant="outline-secondary" v-if="page != 1" @click="page--"> << </b-btn>
        <b-btn variant="outline-secondary" v-for="pageNumber in pages.slice(page-1, page+5)" :key="pageNumber" @click="page = pageNumber"> {{pageNumber}} </b-btn>
        <b-btn variant="outline-secondary" @click="page++" v-if="page < pages.length"> >> </b-btn>
    </div>
</template>

<script>
import { mapGetters } from 'vuex'
export default {
    name: 'App-main',
    data() {
        return {
            page: 1,
            perPage: 2,
            pages: []
        }
    },
    computed: {
        ...mapGetters([
            'posts',
        ]),
        displayPosts() {
            return this.paginate(this.posts)
        }
    },
    methods: {
       setPages () {
           let numberOfPages = Math.ceil(this.posts.length / this.perPage);
           for (let index = 1; index <= numberOfPages; index++) {
               this.pages.push(index);
           }
        },
        paginate(page) {
            let page_ = this.page;
            let perPage = this.perPage;
            let from = (page_ * perPage) - perPage;
            let to = (page_ * perPage);
            return  this.posts.slice(from, to);
        },
        get_posts(){
            this.$store.dispatch('GET_POSTS')
        }
    },
    watch: {
        posts() {
            this.setPages()
        }
    },
    created() {
        this.get_posts()
    },
}
</script>

In general, ideally, I would like to connect Paginator.vue not only to BlogFeed.vue but also to other components in my project.

Answer 1

In its simplest form, the pagination component should take two parameters - the number of pages and the current page. When switching the page - emit its index, in the parent component you catch it, show the corresponding data. Something like this , for example.
Well, in general, you should probably look at the existing pagination components before you start creating your own - vuetify , element , etc. awesome-vue also has a related compilation .