Paginator Component

The Paginator helps you to load any WordPress posts and custom post types dynamically with filter and lore more features.

Backend Usage

At first you need to create a new PHP class in your project like this:

<?php

namespace WLY\Theme\Pagination;

use WLY\ThemeExtensions\Paginator\Paginator;

class PostsPaginator extends Paginator
{
    public static $postType = 'post';
}

And pass the props to the Vue component like this:

<Paginator :paginator='{!! $paginator->toFrontendJsonParams() !!}'
           :paginator-options="{ saveStateToUrl: false }"
           :taxonomies='@json($taxonomies())' />

Vue Usage

<template>
    <Paginator :paginator="paginator" :paginator-options="{}">
        <template v-slot="{ paginator, toPostComponent }">
            <PostsFilter v-if="!hideFilter" :paginator="paginator" />

            <MasonryGrid :watch="[paginator.posts.value]" class="post__overview">
                <div v-for="post in paginator.posts.value" :key="post.id">
                    <component :is="toPostComponent(post.id)"></component>
                </div>
            </MasonryGrid>

            <div class="btn btn-primary" @click="paginator.loadMore()">Load More</div>
        </template>
    </Paginator>
</template>

<script setup lang="ts">
import PostsFilter from '@/js/vue/components/Filter.vue';
import { MasonryGrid, Paginator } from 'wly-theme-extensions';

defineProps(['paginator', 'hideFilter']);
</script>

The component is also available globally under <wte-paginator />.