Previous Next Post

get Previous/Next posts

usePrevNextPost()

const { prev
: prev
, next
: next
 } = await usePrevNextPost
('currentPostSlug')

An example how to use the composable:

[...uri.vue

<script setup lang="ts">
const route = useRoute()
const { prev: prev, next: next } = await usePrevNextPost(route.params.slug[0])
</script>

<template>
  <div class="flex justify-start">
    <UButton
      v-if="prev"
      :alt="prevButton"
      :to="'/' + prev"
      icon="i-heroicons-arrow-left-16-solid"
      variant="soft"
      size="sm"
    />
  </div>
  <div class="flex justify-end">
    <UButton
      v-if="next"
      :alt="nextButton"
      :to="'/' + next"
      trailing-icon="i-heroicons-arrow-right-16-solid"
      variant="soft"
      size="sm"
    />
  </div>
</template>

Staging

Custom Post Types