Installation
pnpm dlx shadcn-vue@latest add "https://ui.stackhacker.io/r/docs-search-modal.json"
Usage
<script setup lang="ts">
import { DocsSearchModal, type DocsSearchItem } from '@/components/docs-search-modal'
const open = ref(false)
const items: DocsSearchItem[] = [
{
title: 'Introduction',
description: 'Start here to understand the docs structure.',
href: '/docs/introduction',
section: 'Getting Started',
content: 'overview installation usage'
}
]
</script>
<template>
<button type="button" @click="open = true">
Search
</button>
<DocsSearchModal v-model:open="open" :items="items" />
</template>App-Owned Data
DocsSearchModal owns the modal UI, keyboard shortcut, local filtering, and result rendering boundary. Your app owns the search data.
Map static docs, Nuxt Content results, or any other source into DocsSearchItem[] before passing it to the component.
import type { DocsSearchItem } from '@/components/docs-search-modal'
const items: DocsSearchItem[] = pages.map(page => ({
title: page.title,
description: page.description,
href: page.path,
section: page.category,
content: page.bodyText
}))The component intentionally does not crawl pages, query Nuxt Content, call a search provider, rank results, or persist recent searches.
Examples
Default
API Reference
Props
| Prop | Type | Default | Description |
|---|---|---|---|
items | DocsSearchItem[] | [] | Searchable items supplied by your app. |
placeholder | string | 'Search documentation...' | Search input placeholder. |
searchLabel | string | 'Search documentation' | Accessible label for the dialog and search input. |
emptyText | string | 'No pages available.' | Text shown when no query is entered and there are no items. |
noResultsText | string | 'No results found.' | Text shown when a query has no matches. |
shortcut | boolean | true | Enable Cmd+K / Ctrl+K to open the modal. |
class | string | — | Additional CSS classes for the modal panel. |
Models
| Model | Type | Description |
|---|---|---|
open | boolean | Controls whether the modal is open. |
Slots
| Slot | Props | Description |
|---|---|---|
item | { item, query } | Custom result renderer. |
Types
interface DocsSearchItem {
title: string
href: string
description?: string
section?: string
content?: string
}