Use the default-page prop or the v-model:page directive to control the current page.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" :total="100" />
</template>
Button to display the pages, use color, variant and size props to style them.Use the total prop to set the total number of items in the list.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" :total="100" />
</template>
Use the items-per-page prop to set the number of items per page. Defaults to 10.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" :items-per-page="20" :total="100" />
</template>
Use the sibling-count prop to set the number of siblings to show. Defaults to 2.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" :sibling-count="1" :total="100" />
</template>
Use the show-edges prop to always show the ellipsis, first and last pages. Defaults to false.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" show-edges :sibling-count="1" :total="100" />
</template>
Use the show-controls prop to show the first, prev, next and last buttons. Defaults to true.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" show-edges :total="100" />
</template>
Use the color prop to set the color of the inactive controls. Defaults to neutral.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" color="primary" :total="100" />
</template>
Use the variant prop to set the variant of the inactive controls. Defaults to outline.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" color="neutral" variant="subtle" :total="100" />
</template>
Use the active-color prop to set the color of the active control. Defaults to primary.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" active-color="neutral" :total="100" />
</template>
Use the active-variant prop to set the variant of the active control. Defaults to solid.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" active-color="primary" active-variant="subtle" :total="100" />
</template>
Use the size prop to set the size of the controls. Defaults to md.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" size="xl" :total="100" />
</template>
Use the disabled prop to disable the pagination controls.
<script setup lang="ts">
const page = ref(5)
</script>
<template>
<PPagination v-model:page="page" :total="100" disabled />
</template>
Use the to prop to transform buttons into links. Pass a function that receives the page number and returns a route destination.
<script setup lang="ts">
import { ref } from 'vue';
const page = ref(5);
function to(page: number) {
return {
query: {
page,
},
hash: '#with-links',
};
}
</script>
<template>
<PPagination
v-model:page="page"
:total="100"
:to="to"
:sibling-count="1"
show-edges
/>
</template>
#with-links hash to avoid going to the top of the page.| Prop | Default | Type |
|---|
| Slot | Type |
|---|
| Event | Type |
|---|
Below is the theme configuration skeleton for the PPagination. Since the component is provided unstyled by default, you will need to fill in these values to apply your own custom look and feel. If you prefer to use our pre-built, opinionated styling, you can instead use our UnoCSS preset, this docs is using it as well.
export default defineAppConfig({
pohon: {
pagination: {
slots: {
root: '',
list: '',
ellipsis: '',
label: '',
first: '',
prev: '',
item: '',
next: '',
last: ''
}
}
}
};
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'
export default defineAppConfig({
pohon: {
pagination: {
slots: {
root: '',
list: '',
ellipsis: '',
label: '',
first: '',
prev: '',
item: '',
next: '',
last: ''
}
}
}
};
With Pohon UI, you can achieve similar component functionality with less code and effort, as it comes with built-in styles mechanism and behaviors that are optimized for common use cases. Since it's using unocss-variants it adds a runtime cost, but it can be worth it if you prioritize development speed and ease of use over fine-grained control.
If this is a deal breaker for you, you can always stick to using Akar and build your own custom components on top of it.