ContentSurround

GitHub
A pair of prev and next links to navigate between pages.
This component is only available when the @nuxt/content module is installed.

Usage

Use the surround prop with the surround value you get when fetching a page surround.

ContentSearchButton

A pre-styled Button to open the ContentSearch modal.

ContentToc

A sticky Table of Contents with automatic active anchor link highlighting.

<script setup lang="ts">
import { useAsyncData, useRoute } from '#app';
import { queryCollectionItemSurroundings } from '#imports';

const route = useRoute();

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

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

Prev / Next

Use the prev-icon and next-icon props to customize the buttons Icon.

ContentSearchButton

A pre-styled Button to open the ContentSearch modal.

ContentToc

A sticky Table of Contents with customizable slots.

<script setup lang="ts">
const surround = ref([
  {
    title: 'ContentSearchButton',
    path: '/docs/pohon/components/content-search-button',
    stem: '3.components/content-search-button',
    description: 'A pre-styled Button to open the ContentSearch modal.'
  },
  {
    title: 'ContentToc',
    path: '/docs/pohon/components/content-toc',
    stem: '3.components/content-toc',
    description: 'A sticky Table of Contents with customizable slots.'
  }
])
</script>

<template>
  <PContentSurround
    prev-icon="i-lucide:chevron-left"
    next-icon="i-lucide:chevron-right"
    :surround="surround"
  />
</template>

Examples

Within a page

Use the ContentSurround component in a page to display the prev and next links:

pages/[...slug].vue
<script setup lang="ts">
const route = useRoute();

const { data: page } = await useAsyncData(route.path, () => queryCollection('docs').path(route.path).first());
if (!page.value) {
  throw createError({ statusCode: 404, statusMessage: 'Page not found', fatal: true });
}
</script>

<template>
  <ExamplePage v-if="page">
    <ExamplePageHeader :title="page.title" />

    <ExamplePageBody>
      <ContentRenderer
        v-if="page.body"
        :value="page"
      />

      <PSeparator v-if="surround?.filter(Boolean).length" />

      <PContentSurround :surround="(surround as any)" />
    </ExamplePageBody>

    <template
      v-if="page?.body?.toc?.links?.length"
      #right
    >
      <PContentToc :links="page.body.toc.links" />
    </template>
  </ExamplePage>
</template>

API

Props

Prop Default Type
as'div'any

The element or component this component should render as.

prevIconappConfig.pohon.icons.arrowLeft string | object

The icon displayed in the prev link.

nextIconappConfig.pohon.icons.arrowRight string | object

The icon displayed in the next link.

surround T[]
pohon { root?: ClassValue; link?: ClassValue; linkLeading?: ClassValue; linkLeadingIcon?: ClassValue; linkTitle?: ClassValue; linkDescription?: ClassValue; }

Slots

Slot Type
link{ link: T; pohon: object; }
link-leading{ link: T; pohon: object; }
link-title{ link: T; pohon: object; }
link-description{ link: T; pohon: object; }

Theme

We use unocss-variants to customize the theme. Read more about it in the theming guide.

Below is the theme configuration skeleton for the PContentSurround. 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.

app.config.ts
export default defineAppConfig({
  pohon: {
    contentSurround: {
      slots: {
        root: '',
        link: '',
        linkLeading: '',
        linkLeadingIcon: '',
        linkTitle: '',
        linkDescription: ''
      },
      variants: {
        direction: {
          left: {
            linkLeadingIcon: ''
          },
          right: {
            link: '',
            linkLeadingIcon: ''
          }
        }
      }
    }
  }
};
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import pohon from 'pohon-ui/vite'

export default defineAppConfig({
  pohon: {
    contentSurround: {
      slots: {
        root: '',
        link: '',
        linkLeading: '',
        linkLeadingIcon: '',
        linkTitle: '',
        linkDescription: ''
      },
      variants: {
        direction: {
          left: {
            linkLeadingIcon: ''
          },
          right: {
            link: '',
            linkLeadingIcon: ''
          }
        }
      }
    }
  }
};

Changelog

No recent changes

ContentSearchButton

A pre-styled Button to open the ContentSearch modal.

ContentToc

A sticky Table of Contents with automatic active anchor link highlighting.