Link to the previous and next article in Nuxt Content

In Nuxt Content v3, queryCollectionItemSurroundings() returns the entries on either side of the current page. Use the same ordering as your article list.

<script setup lang="ts">
const route = useRoute()
const { data: surround } = await useAsyncData(
  `surround-${route.path}`,
  () => queryCollectionItemSurroundings('content', route.path)
    .order('title', 'ASC')
)
</script>

<template>
  <nav aria-label="Article navigation">
    <NuxtLink v-if="surround?.[0]" :to="surround[0].path">
      ← {{ surround[0].title }}
    </NuxtLink>
    <NuxtLink v-if="surround?.[1]" :to="surround[1].path">
      {{ surround[1].title }} →
    </NuxtLink>
  </nav>
</template>

Here, content is a page collection. The first or last result can be null at the edges of the list.

Nuxt Content documentation.