Be part of JetBrains PHPverse 2026 on June 9 – a free online event bringing PHP devs worldwide together.

azbx's avatar
Level 17

Inertia Pagination tips

I'm wondering if I can have the pagination previous and the next separate in vuejs.

0 likes
12 replies
tykus's avatar
tykus
Best Answer
Level 104

Sure, make a Pagination component that takes the meta and links JSON as its prop; e.g.

<script setup>
import {ArrowLongLeftIcon, ArrowLongRightIcon} from '@heroicons/vue/20/solid'
import {computed} from "vue";

const props = defineProps({links: Object, meta: Object})
let pages = props.meta.links
const prevPage = computed(() => pages.shift())
const nextPage = computed(() => pages.pop())
</script>
<template>
  <nav class="flex items-center justify-between border-t border-gray-200 bg-white px-4 py-3 sm:px-6"
       aria-label="Pagination">
    <div class="hidden sm:block">
      <p class="text-sm text-gray-700">
        Showing
        <span class="font-medium">{{ meta.from }}</span>
        to
        <span class="font-medium">{{ meta.to }}</span>
        of
        <span class="font-medium">{{ meta.total }}</span>
        results
      </p>
    </div>
    <div class="flex flex-1 justify-between sm:justify-end">
      <a :href="prevPage.url"
         class="relative inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Previous</a>
      <a :href="nextPage.url"
         class="relative ml-3 inline-flex items-center rounded-md border border-gray-300 bg-white px-4 py-2 text-sm font-medium text-gray-700 hover:bg-gray-50">Next</a>
    </div>
  </nav>
</template>
1 like
azbx's avatar
Level 17

@tykus i would also like to see something to this effect:

< Prev 1.2.3.4.5.6.7.8.9.10 Next >

tykus's avatar

@[aeo] okay; you should have those page links in the meta data - you simply include them in the template

azbx's avatar
Level 17

@tykus

I do have a paginator made already. how must I implement it?

I am using bulma.

tykus's avatar

@[aeo] are you using v-for to loop over the links ?

tykus's avatar

@[aeo] okay, can't see it.

What are you (not) seeing?

1 like
tykus's avatar

@[aeo] what does the JSON structure of the props look like?

azbx's avatar
Level 17

@tykus i dont have the props value in the code, I was implementing your answer in the screen shot.

tykus's avatar

@[aeo] you can inspect it in the browser - do you have Vue Devtools installed?

1 like
azbx's avatar
Level 17

Although I have the passed variables here:

$statuses = Status::where([ ['creator_id', '!=', Auth::user()->id], ['message', '!=', null] ])->paginate(1)->through(function ($status) { return [ 'name' => $status->creator->name, 'created_at' => $status->created_at, 'message' => $status->message, 'DateHum' => $status->DateHum, ]; });

1 like

Please or to participate in this conversation.