Skip to content

Instantly share code, notes, and snippets.

@laymont
Created December 15, 2022 15:49
Show Gist options
  • Save laymont/ccc3d64b8b27808baf0081d4354c3eae to your computer and use it in GitHub Desktop.
Save laymont/ccc3d64b8b27808baf0081d4354c3eae to your computer and use it in GitHub Desktop.
Pagination Inertia vue3
<script setup>
import {Inertia} from "@inertiajs/inertia";
import {Link} from "@inertiajs/inertia-vue3";
const props = defineProps({
links: {
type: Object,
default: () => ({})
}
})
</script>
<template>
<div v-if="Object.keys(links.links).length > 3">
<div class="flex flex-wrap -mb-1">
<template v-for="(link, p) in links.links" :key="p">
<div v-if="link.url === null" class="mr-1 mb-1 px-4 py-3 text-sm leading-4 text-gray-400 border rounded"
v-html="link.label"/>
<Link v-else
class="mr-1 mb-1 px-4 py-3 text-sm leading-4 border rounded hover:bg-white focus:border-indigo-500 focus:text-indigo-500"
:class="{ 'bg-blue-700 text-white': link.active }"
:href="link.url"
v-html="link.label"
preserve-scroll/>
</template>
</div>
</div>
</template>
Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment