Overview
Installation
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/docs-pager.json"
Usage
<script setup lang="ts">
import { DocsPager, type DocsPagerItem } from '@/components/docs-pager'
const previous: DocsPagerItem = {
title: 'Installation',
description: 'Install the project dependencies and configure your app.',
href: '/docs/installation'
}
const next: DocsPagerItem = {
title: 'Configuration',
description: 'Connect the docs shell to your routes and content source.',
href: '/docs/configuration'
}
</script>
<template>
<DocsPager :previous="previous" :next="next" />
</template>App-Owned Pages
DocsPager only renders the portable pager UI. Your app owns page discovery, sorting, current page detection, and route generation.
Map Nuxt Content surroundings, a static docs array, a navigation tree, or any other source into DocsPagerItem objects before passing them to the component.
import type { DocsPagerItem } from '@/components/docs-pager'
const previous: DocsPagerItem | null = surrounding.previous
? {
title: surrounding.previous.title,
description: surrounding.previous.description,
href: surrounding.previous.path
}
: nullThe component intentionally does not query Nuxt Content, compute page order, require NuxtLink, or own documentation layout.
Examples
Default
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
previous | DocsPagerItem | null | null | Previous page supplied by your app. |
next | DocsPagerItem | null | null | Next page supplied by your app. |
previousLabel | string | 'Previous' | Label shown above the previous page title. |
nextLabel | string | 'Next' | Label shown above the next page title. |
class | string | — | Additional CSS classes for the root element. |
Types
interface DocsPagerItem {
title: string
href: string
description?: string
}