Nuxt•5d ago

ContentSurround Question

I am using ContentSurround from Nuxt UI Pro to show the previous and next posts on a blog. However, if I have no previous post, the next button appears on the left side of the surround with a back arrow, instead of on the right side with a next arrow. Is there a way to define if a surround item is the next or previous? If I have a next and previous post, it works great. If I have a previous, but no next, it works great. It's if there is no previous post, then the next item displays as if it is the previous post. If you look at the bottom of this page: https://ui.nuxt.com/getting-started it has the desired behavior with the next item on the right side, with the next arrow. Thanks!

Nuxt UI

Introduction - Nuxt UI v3

Nuxt UI harnesses the combined strengths of Reka UI, Tailwind CSS, and Tailwind Variants to offer developers an unparalleled set of tools for creating sophisticated, accessible, and highly performant user interfaces.

3 Replies

kapa.ai•5d ago

Hi @Shawn. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave: ---------------------- I understand your issue with the ContentSurround component from Nuxt UI Pro. The problem occurs when you have only a next post (without a previous post), causing the next post to appear on the left side with a back arrow instead of on the right side with a forward arrow. Looking at the knowledge sources, the ContentSurround component is designed to display a pair of previous and next links to navigate between pages. The component expects an array of surrounding items, typically in the format [previousItem, nextItem]. When you fetch the surrounding items using queryCollectionItemSurroundings, it returns an array where: - The first element (index 0) is the previous item - The second element (index 1) is the next item If there's no previous item, the array would look like [null, nextItem], but it seems the component might not be handling this case correctly. To solve this issue, you can ensure that the surround array maintains the correct structure even when there's no previous item. When using queryCollectionItemSurroundings, it should preserve the array structure with null for missing items:

<script setup lang="ts">
const route = useRoute()

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path, {
    fields: ['description']
  })
})
</script>

<template>
  <UContentSurround :surround="(surround as any)" />
</template>

<script setup lang="ts">
const route = useRoute()

const { data: surround } = await useAsyncData(`${route.path}-surround`, () => {
  return queryCollectionItemSurroundings('content', route.path, {
    fields: ['description']
  })
})
</script>

<template>
  <UContentSurround :surround="(surround as any)" />
</template>

If you're manually creating the surround array, make sure to maintain the correct structure: - For only a next item: [null, nextItem] - For only a previous item: [previousItem, null] - For both: [previousItem, nextItem] The example you referenced at the bottom of the Nuxt UI getting-started page shows the correct behavior with the next item on the right side with a forward arrow, which suggests that the component works correctly when provided with the proper array structure. If you're still experiencing issues, you might want to check how you're constructing the surround array and ensure it maintains the expected format with null placeholders for missing items. ---------------------- Note: you can ask me a follow up question by @ mentioning me again :speech_balloon: ----------------------

kapa.ai•5d ago

<@106970228247777280> Kapa.ai is still learning and improving, please let me know how I did by reacting below.

ShawnOP•4d ago

This was it! I pushed null to the items array and that did it. Thanks!

Gaming

Programming

ContentSurround Question

Did you find this page helpful?