How to use pagination in laravel Breez - Vue ?

hi folks I created the Laravel Breeze application with the vue (Not alter vue install with the breeze option) So the question is if I want to use the pagination in code how can I use it? Here is the Controller code...

public function index()
    {
        $categories = Category::orderBy('id', 'DESC')->paginate(10);
        return Inertia::render('Admin/Category/Index', compact('categories'));
    }

Here is the Index.Vue code...

<script setup>
import AuthenticatedLayout from '@/Layouts/AuthenticatedLayout.vue';
import { Head } from '@inertiajs/vue3';
import { Link } from '@inertiajs/vue3';
defineProps({
    categories: Object,
});
</script>

<template>
    <Head title="Category" />

    <AuthenticatedLayout>

        <div class="mt-12">
            <div class="max-w-7xl mx-auto sm:px-6 lg:px-8 ">
                <div class="bg-white dark:bg-gray-800 overflow-hidden shadow-sm sm:rounded-lg">
                    <div class=" text-gray-900 dark:text-gray-100">
                        <!-- component -->
                        <div class="w-full">
                            <div class="">
                                <div class="sm:flex items-center justify-end mt-3 mr-3 mb-3">
                                    <Link :href="route('admin.category.create')" class="btn btn-blue">
                                    <p class="text-sm font-medium leading-none">Add Category</p>
                                    </Link>
                                </div>
                                <div class="overflow-x-auto">
                                    <table class="w-full whitespace-nowrap">
                                        <tbody>
                                            <tr v-for="category in categories" :key="category.id"
                                                class="focus:outline-none h-16 rounded justify-end">
                                                <td class="pl-20 justify-end">
                                                    <div class="flex items-center pl-5">
                                                        <p class="text-base font-medium leading-none text-white-700 mr-2">{{
                                                            category.name }}
                                                        </p>
                                                    </div>
                                                </td>
                                                <td class="pl-10 justify-end">
                                                    <Link :href="route('admin.category.edit', category.id)"
                                                        class="py-3 px-3 text-sm leading-none text-green-700 bg-green-100 rounded focus:outline-none">
                                                    Edit</Link>
                                                </td>
                                                <td class="pl-10 justify-end">
                                                    <Link :href="route('admin.category.destroy', category.id)"
                                                        method="delete" as="button" type="submit"
                                                        onclick="return confirm('Are you sure want to delete the role?')"
                                                        class="py-3 px-3 text-sm leading-none text-red-700 bg-red-100 rounded focus:outline-none">
                                                    Delete</Link>
                                                </td>
                                            </tr>
                                            <tr class=""></tr>
                                        </tbody>
                                        <tfoot></tfoot>
                                    </table>
                                </div>
                            </div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </AuthenticatedLayout>
</template>

Please help me it would be appreciated..

DhPandya

2 years ago

Best Answer

Level 12

@nihir https://laracasts.com/series/build-modern-laravel-apps-using-inertia-js/episodes/17

Please or to participate in this conversation.