Crear un Componente de paginación personalizado en Laravel Inertia y Tailwind 4

▶

En Inertia, no tenemos un componente de paginación para usar; así que, tenemos que crear uno; recordemos que nos quedamos en esta guía en el uso de los mensajes flash en Laravel Inertia.

Desde el listado paginado, debemos el apartado de links en los cuales se encuentran todos los enlaces para la paginación en un array:

Así que, los iteramos:

<Link v-for="l in categories.links" :key="l" v-if="!l.active" class="px-2 py-1" :href="l.url" v-html="l.label"/>

Para desactivar la página actual y evitar dejar un enlace que navegue a sí mismo, podemos hacer un condicional y colocar un SPAN cuando se utilice la página actual:

<template v-for="l in categories.links" :key="l">
    <Link v-if="!l.active" class="px-2 py-1" :href="l.url" v-html="l.label"/>
    <span v-else class="px-2 py-1"  v-html="l.label"  />
</template>

Y agregar algo de estilo para indicar que es un enlace desactivado, aunque realmente es una etiqueta SPAN:

<template v-for="l in categories.links" :key="l">
    <Link v-if="!l.active" class="px-2 py-1" :href="l.url" v-html="l.label"/>
    <span v-else class="px-2 py-1 cursor-pointer text-gray-500"  v-html="l.label"  />
</template>
<script>

Desde Vue, tenemos una etiqueta llamada "Component" con la cual podemos renderizar componentes de manera dinámica en base a una condición evaluada en con el prop de is:

import Foo from './Foo.vue'
import Bar from './Bar.vue'

export default {
  components: { Foo, Bar },
  data() {
    return {
      view: 'Foo'
    }
  }
}
</script>

<template>
  <component :is="view" />
</template>

Con este componente en Vue, podemos renderizar ya sea componente de Vue o HTML directamente desde la definición del mismo:

<Component v-for="l in categories.links" :key="l" :is="!l.active ? 'Link' :'span'" class="px-2 py-1" :class="!l.active ? '' : 'text-gray-500 cursor-pointer'" :href="l.url" v-html="l.label" />

Y con esto, tenemos el mismo resultado que antes, pero queda más limpia la sintaxis.

Ahora, para poder reutilizar el componente de manera global, creamos un nuevo componente que reciba como parámetro el listado paginado mediante un prop:

resources/js/Shared/Pagination.vue

<template>
    <!-- <Link class="px-2 py-1" v-if="!l.active" :href="l.url">{{ l.label }}</Link>
        <span class="px-2 py-1 cursor-pointer text-gray-500" v-else>{{ l.label }}</span> -->
    <template v-for="l in links" v-bind:key="l">
        
        <Component v-html="`${l.label}`" class="px-2 py-1" :is="!l.active ? 'Link' : 'span'" 
        :href="l.url == null ? '#' : l.url" :class="!l.active ? '' : 'cursor-pointer text-gray-500'"
        />
    </template>
</template>
<script>
import { Link } from '@inertiajs/vue3';
export default {
    components: {
        Link
    },
    props: {
        links: Array
    }
}
</script>

Desde el listado de categorías, usamos este componente:

resources/js/Pages/Dashboard/Category/Index.vue

***
        <pagination :links="categories.links" />
    </app-layout>
</template>
***
import Pagination from '@/Shared/Pagination.vue'

export default {
    components:{
        AppLayout,
        Link, 
        Pagination
    },
// ***

Y obtendremos:

http://localhost/category?page=1

Conozcamos el uso de otro componente que a diferencia de este ya existe en Inertia, la Barra de progreso y spinner.