Pagination

LaunchStack provides a default pagination component, 100% compatible with Laravel, Vue, and Inertiajs.

How to use

class BlogController extends Controller
{
    public function home()
    {
        return Inertia::render('Blog/Home', [
            'posts' => BlogPost::published()->latest()->paginate(12)
        ]);
    }
}

# resources/js/Components/Pagination.vue

<script setup>
import Pagination from "@/Components/Pagination.vue";
const { posts } = defineProps({
    posts: Object,
});
</script>
<template>
    <div v-for="post in posts" :key="post">
        {{ post.title }}
    </div>

    <Pagination :data="posts" />
</template>

The component was two different styles:

• list [default value]

• table

You can directly pass props to the component:

<Pagination :data="posts" style="table" />