DEV Community

Cover image for Laravel Breeze & Vue.js pagination component
Zahir Din
Zahir Din

Posted on

Laravel Breeze & Vue.js pagination component

Laravel have a pagination feature. It's help blade template to generate a pagination links. This feature is really useful for blade template.

But how do we display it in Javascript framework?

Here is example we can use in Vue.js framework. There is 2 method development for developer to use Vue.js framework.

I will show example for both.


Laravel Breeze (Inertia.js with Vue.js)

First, create a backend that return the pagination.

<?php

namespace App\Http\Controllers;

use App\Models\Activity;
use Inertia\Inertia;

class ActivityController extends Controller
{
    public function index()
    {
        $activities = Activity::paginate(10)->withQueryString();

        return Inertia::render('/activities/index', [
            'activities' => $activities,
        ]);
    }
}

Enter fullscreen mode Exit fullscreen mode

In page file, we can use the component like this:

<script setup>
import PaginationBar from '../components/PaginationBar.vue'

const props = defineProps({
    activities: Object,
});

</script>

<template>
    <PaginationBar :links="props.activities.links" />
</template>
Enter fullscreen mode Exit fullscreen mode

We create a pagination component file (resources/js/components/PaginationBar.vue).

<script setup>
import { Link } from "@inertiajs/vue3";
import { onMounted, ref, watch } from "vue";

const props = defineProps({
    links: Array,
});

const buttons = ref([]);
const button_prev_url = ref(null);
const button_next_url = ref(null);

const init = (limit) => {
    let links = props.links;
    let selected_index = null;

    // remove prev & next
    links.shift();
    links.pop();

    // select index
    links.map((link, i) => {
        if (link.active) selected_index = i;
    });

    button_prev_url.value = links[selected_index - 1]?.url;
    button_next_url.value = links[selected_index + 1]?.url;

    buttons.value = links;
};

watch(
    () => props.links,
    () => init(),
);

onMounted(() => init());
</script>

<template>
    <div v-if="buttons.length > 1">
        <div class="flex flex-wrap justify-center">
            <Link
                class="px-4 py-2 ml-2 mr-4 text-sm rounded-lg"
                :class="
                    button_prev_url
                        ? 'text-slate-500 focus:text-main-500 hover:bg-main-50 font-bold'
                        : 'text-slate-300'
                "
                :href="button_prev_url"
            >
                Previous
            </Link>
            <template v-for="(btn, i) in buttons" v-bind:key="i">
                <Link
                    class="px-4 py-2 mx-0.5 text-sm font-bold rounded-lg hover:bg-main-50 focus:text-main-500"
                    :class="
                        btn.active ? 'bg-main-600 text-white' : 'text-slate-500'
                    "
                    :href="btn.url"
                >
                    {{ btn.label }}
                </Link>
            </template>
            <Link
                class="px-4 py-2 ml-4 mr-2 text-sm rounded-lg"
                :class="
                    button_next_url
                        ? 'text-slate-500 focus:text-main-500 hover:bg-main-50 font-bold'
                        : 'text-slate-300'
                "
                :href="button_next_url"
            >
                Next
            </Link>
        </div>
    </div>
</template>

Enter fullscreen mode Exit fullscreen mode

External Vue.js Framework

For external, it's a bit challenging because Laravel pagination passing the backend url instead of frontend url.

Let's try create an API that return the pagination.

<?php

namespace App\Http\Controllers;

use App\Models\Activity;
use Illuminate\Http\Request;

class ActivityController extends Controller
{
    public function index(Request $request)
    {
        $activities = Activity::paginate(10)->withQueryString();

        return response()->json($activities);
    }
}
Enter fullscreen mode Exit fullscreen mode

In page file, we can use the component like this:

<script setup>
import { ref, onUpdated, onMounted } from 'vue'
import PaginationBar from '../components/PaginationBar.vue'

const activities = ref(null);

const load = () => {
    // Fetch API here and set it response as activities value.
}

onUpdated(() => load())
onMounted(() => load())
</script>

<template>
    <PaginationBar route_name="activities" :links="activities.links" />
</template>
Enter fullscreen mode Exit fullscreen mode

We create a pagination component file (src/components/PaginationBar.vue).

<script setup>
import { onMounted, ref, watch } from "vue";
import { RouterLink } from 'vue-router'

const props = defineProps({
    links: Array,
    route_name: String,
});

const buttons = ref([]);
const button_prev_label = ref(null);
const button_next_label = ref(null);

const init = () => {
    let links = props.links;
    let selected_index = null;

    // remove prev & next
    links.shift();
    links.pop();

    // select index
    links.map((link, i) => {
        if (link.active) selected_index = i;
    });

    button_prev_label.value = links[selected_index - 1]?.label;
    button_next_label.value = links[selected_index + 1]?.label;

    buttons.value = links;
}

watch(
    () => props.links,
    () => init(),
);

onMounted(() => init());
</script>

<template>
    <div v-if="buttons.length > 1" class="flex justify-center my-5">
        <div class="flex flex-wrap justify-center py-2 min-w-2/5 rounded-lg shadow">
            <RouterLink
                class="px-4 py-2 ml-2 mr-4 text-sm rounded-lg"
                :class="button_prev_label ? 'text-slate-300 focus:text-white-300 hover:bg-slate-800 font-bold' : 'text-slate-500'"
                :to="{ name: props.route_name, query: { page: button_prev_label } }"
            >
                Previous
            </RouterLink>
            <template v-for="(btn, i) in buttons" v-bind:key="i">
                <div
                    v-if="btn.label == '...'"
                    class="px-4 py-2 mx-0.5 text-sm font-bold rounded-lg text-slate-500"
                >
                    {{ btn.label }}
                </div>
                <RouterLink
                    v-else
                    class="px-4 py-2 mx-0.5 text-sm font-bold rounded-lg hover:bg-slate-800 focus:text-main-500"
                    :class="btn.active ? 'bg-slate-800 text-white' : 'text-slate-500'"
                    :to="{ name: props.route_name, query: { page: btn.label } }"
                >
                    {{ btn.label }}
                </RouterLink>
            </template>
            <RouterLink
                class="px-4 py-2 ml-4 mr-2 text-sm rounded-lg"
                :class="button_next_label ? 'text-slate-300 focus:text-white-300 hover:bg-slate-800 font-bold' : 'text-slate-500'"
                :to="{ name: props.route_name, query: { page: button_next_label } }"
            >
                Next
            </RouterLink>
        </div>
    </div>
</template>
Enter fullscreen mode Exit fullscreen mode

As you can see, I use props routename so that I can pass a route name from Vue.js router and not from Laravel router.

This is example I have. Anyone can use and maybe enhance for a better use case.

Thank you.

Top comments (0)