InhoudZoeken

OpdrachtpaletGitHub
Een kant-en-klaar CommandPalette om toe te voegen aan uw documentatie.
Dit onderdeel is alleen beschikbaar wanneer de @nuxt/content module is geïnstalleerd.

Gebruik

De ContentSearch-component breidt de CommandPalette uit met ingebouwde @nuxt/content zoekondersteuning, navigatiegroepering en kleurmodusopdrachten. Het ondersteunt zowel client-side Fuse.js filteren en server-side FTS5 full-text search. U kunt elke CommandPalette-eigenschap doorgeven, zoals icon, placeholder, enz.

U kunt het CommandPalette openen door op: kbd{value="meta"}: kbd{value="K" class="ms-px"} te drukken, de ContentSearchButton component te gebruiken of de useContentSearch composable: const { open } = useContentSearch() te gebruiken.
Het wordt aanbevolen om de ContentSearch-component in een ClientOnly -component te wikkelen, zodat deze niet op de server wordt weergegeven.

Navigatie

Gebruik de navigation prop met queryCollectionNavigation om zoekresultaten per sectie te groeperen:

app.vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))
</script>

<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        :navigation="navigation"
      />
    </ClientOnly>
  </UApp>
</template>

Bestanden

Gebruik de files prop met queryCollectionSearchSections om alle zoeksecties vooraf te laden en gebruik client-side Fuse.js filtering:

app.vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))

const { data: files } = useLazyAsyncData('search', () => queryCollectionSearchSections('docs', {
  ignoredTags: ['style']
}), {
  server: false
})
</script>

<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        :navigation="navigation"
        :files="files"
        :fuse="{ resultLimit: 20, fuseOptions: { threshold: 0.2 } }"
      />
    </ClientOnly>
  </UApp>
</template>
Gebruik de fuse prop om useFuse opties te configureren die zijn doorgegeven aan de onderliggende CommandPalette zoals resultLimit (standaard 12) en fuseOptions.threshold (standaard 0.1).

Zoeken: badge{label="4.8+" class="align-text-top"}

Gebruik de search prop met useSearchCollection voor server-side FTS5 full-text search met gemarkeerde fragmenten in plaats van client-side filtering:

Vereist @nuxt/content v3.14 +.
app.vue
<script setup lang="ts">
const { data: navigation } = await useAsyncData('navigation', () => queryCollectionNavigation('content'))

const { search, status, init } = useSearchCollection('content', {
  immediate: false,
  ignoredTags: ['style']
})

const { open } = useContentSearch()

// Defer index initialization until the user opens the palette when using `immediate: false`
watch(open, (value) => {
  if (value && status.value === 'idle') {
    init()
  }
})
</script>

<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        :navigation="navigation"
        :search="search"
        :search-status="status"
      />
    </ClientOnly>
  </UApp>
</template>
Geef search-status door, zodat de component de zoekopdracht automatisch opnieuw kan activeren zodra de index gereed is. Gebruik search-delay (standaard 100ms) om te bepalen hoe lang typen moet worden onderbroken voordat de zoekopdracht wordt gestart. De optie fuse.resultLimit dekt de totale resultaten die in alle groepen zijn geretourneerd (zoekresultaten, links, thema, enz.).
Wanneer u de search prop gebruikt, hoeft u files niet door te geven. Het onderdeel roept de asynchrone zoekfunctie op elke toetsaanslag aan in plaats van Fuse.js. Resultaten worden automatisch in kaart gebracht en gegroepeerd door navigatie met gemarkeerde fragmenten. In tegenstelling tot de files-benadering die alle zoeksecties vooraf laadt en u door navigatie-items laat bladeren voordat u typt, retourneert de search-prop alleen resultaten nadat een zoekopdracht is ingevoerd.

Snelkoppeling

Gebruik de shortcut-prop om de snelkoppeling te wijzigen die wordt gebruikt in defineShortcuts om de ContentSearch-component te openen. Standaard is meta_k (: kbd{value="meta"}: kbd{value="K"}).

app.vue
<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        shortcut="meta_k"
      />
    </ClientOnly>
  </UApp>
</template>

Links

Gebruik de links prop om een groep snel toegankelijke links toe te voegen aan de bovenkant van het opdrachtpalet:

app.vue
<script setup lang="ts">
const links = [{
  label: 'Docs',
  icon: 'i-lucide-book',
  to: '/docs/getting-started'
}, {
  label: 'Components',
  icon: 'i-lucide-box',
  to: '/docs/components'
}, {
  label: 'Showcase',
  icon: 'i-lucide-presentation',
  to: '/showcase'
}]
</script>

<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        :links="links"
      />
    </ClientOnly>
  </UApp>
</template>

Kleurmodus

Standaard wordt een groep commando 's toegevoegd aan het opdrachtpalet, zodat u kunt schakelen tussen de lichte en donkere modus. Dit wordt alleen van kracht als de colorMode niet wordt geforceerd op een specifieke pagina die kan worden bereikt via definePageMeta:

pages/index.vue
<script setup lang="ts">
definePageMeta({
  colorMode: 'dark'
})
</script>

U kunt dit gedrag uitschakelen door de color-mode prop op false te zetten:

app.vue
<template>
  <UApp>
    <ClientOnly>
      <LazyUContentSearch
        :color-mode="false"
      />
    </ClientOnly>
  </UApp>
</template>

API

Props

Prop Default Type
size
'md'
"sm" | "md" | "xs" | "lg" | "xl"
close
true
boolean | Omit<ButtonProps, LinkPropsKeys>

Display a close button in the input (useful when inside a Modal for example). { size: 'md', color: 'neutral', variant: 'ghost' }

input
true
boolean | Omit<InputProps<AcceptableValue, ModelModifiers>, "modelValue" | "defaultValue">

Configure the input or hide it with false. { fixed: true }

shortcut
'meta_k'
string

Keyboard shortcut to open the search (used by defineShortcuts)

links
T[]

Links group displayed as the first group in the command palette.

navigation
ContentNavigationItem[]
files
ContentSearchFile[]
fuse
{ fuseOptions: { ignoreLocation: true, includeMatches: true, useTokenSearch: true, threshold: 0.1, keys: ['label', 'description', 'suffix'] }, resultLimit: 12, matchAllWhenSearchEmpty: true }
UseFuseOptions<T>

Options for useFuse passed to the CommandPalette.

search
(query: string, opts?: ContentSearchOptions | undefined): Promise<ContentSearchResult[]>

Async search function (e.g. from useSearchCollection). When provided, ContentSearch calls it on each keystroke and uses the results instead of Fuse. Results are mapped, sanitized, and grouped by navigation internally.

searchStatus
"error" | "loading" | "idle" | "ready"

Status of the async search index (e.g. from useSearchCollection). When the status transitions to 'ready', the search is automatically re-triggered if there's a pending term.

searchDelay
100
number

Delay (in milliseconds) before the search is triggered (debounced). Keeps the input responsive by only running the search after typing settles. Set to 0 to disable.

colorMode
true
boolean

When true, the theme command will be added to the groups.

title
string
description
string
overlay
true
boolean

Render an overlay behind the modal.

transition
true
boolean

Animate the modal when opening or closing.

content
DialogContentProps & Partial<EmitsToProps<DialogContentImplEmits>>

The content of the modal.

dismissible
true
boolean

When false, the modal will not close when clicking outside or pressing escape.

fullscreen
false
boolean

When true, the modal will take up the full screen.

modal
boolean

The modality of the dialog When set to true,
interaction with outside elements will be disabled and only dialog content will be visible to screen readers.

portal
true
string | false | true | HTMLElement

Render the modal in a portal.

unmountOnHide
true
boolean

When set to false, the dialog content will not be unmounted when closed, but instead hidden with CSS.
Useful for SEO or when you want to improve performance by not remounting the component on every open.

icon
appConfig.ui.icons.search
any

The icon displayed in the input. Set to false to hide the icon.

trailingIcon
appConfig.ui.icons.search
any

The icon displayed on the right side of the input.

selectedIcon
appConfig.ui.icons.check
any

The icon displayed when an item is selected.

childrenIcon
appConfig.ui.icons.chevronRight
any

The icon displayed when an item has children.

placeholder
t('commandPalette.placeholder')
string

The placeholder text for the input.

autofocus
true
boolean

Automatically focus the input when component is mounted.

loading
boolean

When true, the loading icon will be displayed.

loadingIcon
appConfig.ui.icons.loading
any

The icon when the loading prop is true.

closeIcon
appConfig.ui.icons.close
any

The icon displayed in the close button.

back
true
boolean | Omit<ButtonProps, LinkPropsKeys>

Display a button to navigate back in history. { size: 'md', color: 'neutral', variant: 'link' }

backIcon
appConfig.ui.icons.arrowLeft
any

The icon displayed in the back button.

disabled
boolean

When true, prevents the user from interacting with listbox

highlightOnHover
boolean

When true, hover over item will trigger highlight

labelKey
'label'
string

The key used to get the label from the item.

descriptionKey
'description'
string

The key used to get the description from the item.

preserveGroupOrder
false
boolean

Whether to preserve the order of groups as defined in the groups prop when filtering. When false, groups will appear based on item matches.

virtualize
false
boolean | { overscan?: number ; estimateSize?: number | ((index: number) => number) | undefined; } | undefined

Enable virtualization for large lists. Note: when enabled, all groups are flattened into a single list due to a limitation of Reka UI (https://github.com/unovue/reka-ui/issues/1885).

groups
CommandPaletteGroup<ContentSearchItem>[]
searchTerm
''
string
ui
{ modal?: SlotClass; input?: SlotClass; } & { root?: SlotClass; input?: SlotClass; close?: SlotClass; back?: SlotClass; content?: SlotClass; footer?: SlotClass; viewport?: SlotClass; group?: SlotClass; empty?: SlotClass; label?: SlotClass; item?: SlotClass; itemLeadingIcon?: SlotClass; itemLeadingAvatar?: SlotClass; itemLeadingAvatarSize?: SlotClass; itemLeadingChip?: SlotClass; itemLeadingChipSize?: SlotClass; itemTrailing?: SlotClass; itemTrailingIcon?: SlotClass; itemTrailingHighlightedIcon?: SlotClass; itemTrailingKbds?: SlotClass; itemTrailingKbdsSize?: SlotClass; itemWrapper?: SlotClass; itemLabel?: SlotClass; itemLabelBase?: SlotClass; itemLabelPrefix?: SlotClass; itemLabelSuffix?: SlotClass; itemDescription?: SlotClass; }

Slots

Slot Type
empty
{ searchTerm: string; }
footer
{ ui: { root: (props?: Record<string, any> | undefined) => string; input: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; back: (props?: Record<string, any> | undefined) => string; content: (props?: Record<string, any> | undefined) => string; footer: (props?: Record<string, any> | undefined) => string; viewport: (props?: Record<string, any> | undefined) => string; group: (props?: Record<string, any> | undefined) => string; empty: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; item: (props?: Record<string, any> | undefined) => string; itemLeadingIcon: (props?: Record<string, any> | undefined) => string; itemLeadingAvatar: (props?: Record<string, any> | undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> | undefined) => string; itemLeadingChip: (props?: Record<string, any> | undefined) => string; itemLeadingChipSize: (props?: Record<string, any> | undefined) => string; itemTrailing: (props?: Record<string, any> | undefined) => string; itemTrailingIcon: (props?: Record<string, any> | undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> | undefined) => string; itemTrailingKbds: (props?: Record<string, any> | undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> | undefined) => string; itemWrapper: (props?: Record<string, any> | undefined) => string; itemLabel: (props?: Record<string, any> | undefined) => string; itemLabelBase: (props?: Record<string, any> | undefined) => string; itemLabelPrefix: (props?: Record<string, any> | undefined) => string; itemLabelSuffix: (props?: Record<string, any> | undefined) => string; itemDescription: (props?: Record<string, any> | undefined) => string; }; }
back
{ ui: { root: (props?: Record<string, any> | undefined) => string; input: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; back: (props?: Record<string, any> | undefined) => string; content: (props?: Record<string, any> | undefined) => string; footer: (props?: Record<string, any> | undefined) => string; viewport: (props?: Record<string, any> | undefined) => string; group: (props?: Record<string, any> | undefined) => string; empty: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; item: (props?: Record<string, any> | undefined) => string; itemLeadingIcon: (props?: Record<string, any> | undefined) => string; itemLeadingAvatar: (props?: Record<string, any> | undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> | undefined) => string; itemLeadingChip: (props?: Record<string, any> | undefined) => string; itemLeadingChipSize: (props?: Record<string, any> | undefined) => string; itemTrailing: (props?: Record<string, any> | undefined) => string; itemTrailingIcon: (props?: Record<string, any> | undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> | undefined) => string; itemTrailingKbds: (props?: Record<string, any> | undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> | undefined) => string; itemWrapper: (props?: Record<string, any> | undefined) => string; itemLabel: (props?: Record<string, any> | undefined) => string; itemLabelBase: (props?: Record<string, any> | undefined) => string; itemLabelPrefix: (props?: Record<string, any> | undefined) => string; itemLabelSuffix: (props?: Record<string, any> | undefined) => string; itemDescription: (props?: Record<string, any> | undefined) => string; }; }
close
{ ui: { root: (props?: Record<string, any> | undefined) => string; input: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; back: (props?: Record<string, any> | undefined) => string; content: (props?: Record<string, any> | undefined) => string; footer: (props?: Record<string, any> | undefined) => string; viewport: (props?: Record<string, any> | undefined) => string; group: (props?: Record<string, any> | undefined) => string; empty: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; item: (props?: Record<string, any> | undefined) => string; itemLeadingIcon: (props?: Record<string, any> | undefined) => string; itemLeadingAvatar: (props?: Record<string, any> | undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> | undefined) => string; itemLeadingChip: (props?: Record<string, any> | undefined) => string; itemLeadingChipSize: (props?: Record<string, any> | undefined) => string; itemTrailing: (props?: Record<string, any> | undefined) => string; itemTrailingIcon: (props?: Record<string, any> | undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> | undefined) => string; itemTrailingKbds: (props?: Record<string, any> | undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> | undefined) => string; itemWrapper: (props?: Record<string, any> | undefined) => string; itemLabel: (props?: Record<string, any> | undefined) => string; itemLabelBase: (props?: Record<string, any> | undefined) => string; itemLabelPrefix: (props?: Record<string, any> | undefined) => string; itemLabelSuffix: (props?: Record<string, any> | undefined) => string; itemDescription: (props?: Record<string, any> | undefined) => string; }; }
item
{ item: ContentSearchItem; index: number; ui: { root: (props?: Record<string, any> | undefined) => string; input: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; back: (props?: Record<string, any> | undefined) => string; content: (props?: Record<string, any> | undefined) => string; footer: (props?: Record<string, any> | undefined) => string; viewport: (props?: Record<string, any> | undefined) => string; group: (props?: Record<string, any> | undefined) => string; empty: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; item: (props?: Record<string, any> | undefined) => string; itemLeadingIcon: (props?: Record<string, any> | undefined) => string; itemLeadingAvatar: (props?: Record<string, any> | undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> | undefined) => string; itemLeadingChip: (props?: Record<string, any> | undefined) => string; itemLeadingChipSize: (props?: Record<string, any> | undefined) => string; itemTrailing: (props?: Record<string, any> | undefined) => string; itemTrailingIcon: (props?: Record<string, any> | undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> | undefined) => string; itemTrailingKbds: (props?: Record<string, any> | undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> | undefined) => string; itemWrapper: (props?: Record<string, any> | undefined) => string; itemLabel: (props?: Record<string, any> | undefined) => string; itemLabelBase: (props?: Record<string, any> | undefined) => string; itemLabelPrefix: (props?: Record<string, any> | undefined) => string; itemLabelSuffix: (props?: Record<string, any> | undefined) => string; itemDescription: (props?: Record<string, any> | undefined) => string; }; }
item-leading
{ item: ContentSearchItem; index: number; ui: { root: (props?: Record<string, any> | undefined) => string; input: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; back: (props?: Record<string, any> | undefined) => string; content: (props?: Record<string, any> | undefined) => string; footer: (props?: Record<string, any> | undefined) => string; viewport: (props?: Record<string, any> | undefined) => string; group: (props?: Record<string, any> | undefined) => string; empty: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; item: (props?: Record<string, any> | undefined) => string; itemLeadingIcon: (props?: Record<string, any> | undefined) => string; itemLeadingAvatar: (props?: Record<string, any> | undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> | undefined) => string; itemLeadingChip: (props?: Record<string, any> | undefined) => string; itemLeadingChipSize: (props?: Record<string, any> | undefined) => string; itemTrailing: (props?: Record<string, any> | undefined) => string; itemTrailingIcon: (props?: Record<string, any> | undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> | undefined) => string; itemTrailingKbds: (props?: Record<string, any> | undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> | undefined) => string; itemWrapper: (props?: Record<string, any> | undefined) => string; itemLabel: (props?: Record<string, any> | undefined) => string; itemLabelBase: (props?: Record<string, any> | undefined) => string; itemLabelPrefix: (props?: Record<string, any> | undefined) => string; itemLabelSuffix: (props?: Record<string, any> | undefined) => string; itemDescription: (props?: Record<string, any> | undefined) => string; }; }
item-label
{ item: ContentSearchItem; index: number; ui: { root: (props?: Record<string, any> | undefined) => string; input: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; back: (props?: Record<string, any> | undefined) => string; content: (props?: Record<string, any> | undefined) => string; footer: (props?: Record<string, any> | undefined) => string; viewport: (props?: Record<string, any> | undefined) => string; group: (props?: Record<string, any> | undefined) => string; empty: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; item: (props?: Record<string, any> | undefined) => string; itemLeadingIcon: (props?: Record<string, any> | undefined) => string; itemLeadingAvatar: (props?: Record<string, any> | undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> | undefined) => string; itemLeadingChip: (props?: Record<string, any> | undefined) => string; itemLeadingChipSize: (props?: Record<string, any> | undefined) => string; itemTrailing: (props?: Record<string, any> | undefined) => string; itemTrailingIcon: (props?: Record<string, any> | undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> | undefined) => string; itemTrailingKbds: (props?: Record<string, any> | undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> | undefined) => string; itemWrapper: (props?: Record<string, any> | undefined) => string; itemLabel: (props?: Record<string, any> | undefined) => string; itemLabelBase: (props?: Record<string, any> | undefined) => string; itemLabelPrefix: (props?: Record<string, any> | undefined) => string; itemLabelSuffix: (props?: Record<string, any> | undefined) => string; itemDescription: (props?: Record<string, any> | undefined) => string; }; }
item-description
{ item: ContentSearchItem; index: number; ui: { root: (props?: Record<string, any> | undefined) => string; input: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; back: (props?: Record<string, any> | undefined) => string; content: (props?: Record<string, any> | undefined) => string; footer: (props?: Record<string, any> | undefined) => string; viewport: (props?: Record<string, any> | undefined) => string; group: (props?: Record<string, any> | undefined) => string; empty: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; item: (props?: Record<string, any> | undefined) => string; itemLeadingIcon: (props?: Record<string, any> | undefined) => string; itemLeadingAvatar: (props?: Record<string, any> | undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> | undefined) => string; itemLeadingChip: (props?: Record<string, any> | undefined) => string; itemLeadingChipSize: (props?: Record<string, any> | undefined) => string; itemTrailing: (props?: Record<string, any> | undefined) => string; itemTrailingIcon: (props?: Record<string, any> | undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> | undefined) => string; itemTrailingKbds: (props?: Record<string, any> | undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> | undefined) => string; itemWrapper: (props?: Record<string, any> | undefined) => string; itemLabel: (props?: Record<string, any> | undefined) => string; itemLabelBase: (props?: Record<string, any> | undefined) => string; itemLabelPrefix: (props?: Record<string, any> | undefined) => string; itemLabelSuffix: (props?: Record<string, any> | undefined) => string; itemDescription: (props?: Record<string, any> | undefined) => string; }; }
item-trailing
{ item: ContentSearchItem; index: number; ui: { root: (props?: Record<string, any> | undefined) => string; input: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; back: (props?: Record<string, any> | undefined) => string; content: (props?: Record<string, any> | undefined) => string; footer: (props?: Record<string, any> | undefined) => string; viewport: (props?: Record<string, any> | undefined) => string; group: (props?: Record<string, any> | undefined) => string; empty: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; item: (props?: Record<string, any> | undefined) => string; itemLeadingIcon: (props?: Record<string, any> | undefined) => string; itemLeadingAvatar: (props?: Record<string, any> | undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> | undefined) => string; itemLeadingChip: (props?: Record<string, any> | undefined) => string; itemLeadingChipSize: (props?: Record<string, any> | undefined) => string; itemTrailing: (props?: Record<string, any> | undefined) => string; itemTrailingIcon: (props?: Record<string, any> | undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> | undefined) => string; itemTrailingKbds: (props?: Record<string, any> | undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> | undefined) => string; itemWrapper: (props?: Record<string, any> | undefined) => string; itemLabel: (props?: Record<string, any> | undefined) => string; itemLabelBase: (props?: Record<string, any> | undefined) => string; itemLabelPrefix: (props?: Record<string, any> | undefined) => string; itemLabelSuffix: (props?: Record<string, any> | undefined) => string; itemDescription: (props?: Record<string, any> | undefined) => string; }; }
group-label
{ group: CommandPaletteGroup<ContentSearchItem>; label: string; ui: { root: (props?: Record<string, any> | undefined) => string; input: (props?: Record<string, any> | undefined) => string; close: (props?: Record<string, any> | undefined) => string; back: (props?: Record<string, any> | undefined) => string; content: (props?: Record<string, any> | undefined) => string; footer: (props?: Record<string, any> | undefined) => string; viewport: (props?: Record<string, any> | undefined) => string; group: (props?: Record<string, any> | undefined) => string; empty: (props?: Record<string, any> | undefined) => string; label: (props?: Record<string, any> | undefined) => string; item: (props?: Record<string, any> | undefined) => string; itemLeadingIcon: (props?: Record<string, any> | undefined) => string; itemLeadingAvatar: (props?: Record<string, any> | undefined) => string; itemLeadingAvatarSize: (props?: Record<string, any> | undefined) => string; itemLeadingChip: (props?: Record<string, any> | undefined) => string; itemLeadingChipSize: (props?: Record<string, any> | undefined) => string; itemTrailing: (props?: Record<string, any> | undefined) => string; itemTrailingIcon: (props?: Record<string, any> | undefined) => string; itemTrailingHighlightedIcon: (props?: Record<string, any> | undefined) => string; itemTrailingKbds: (props?: Record<string, any> | undefined) => string; itemTrailingKbdsSize: (props?: Record<string, any> | undefined) => string; itemWrapper: (props?: Record<string, any> | undefined) => string; itemLabel: (props?: Record<string, any> | undefined) => string; itemLabelBase: (props?: Record<string, any> | undefined) => string; itemLabelPrefix: (props?: Record<string, any> | undefined) => string; itemLabelSuffix: (props?: Record<string, any> | undefined) => string; itemDescription: (props?: Record<string, any> | undefined) => string; }; }
content
{ close: () => void; }

Uitzendt

Event Type
update:searchTerm
[value: string]

Expose

Wanneer u de component opent via een sjabloonref, kunt u het volgende gebruiken:

NaamType
commandPaletteRefRef<InstanceType<typeof UCommandPalette> | null>

Thema

app.config.ts
export default defineAppConfig({
  ui: {
    contentSearch: {
      slots: {
        modal: '',
        input: ''
      },
      variants: {
        fullscreen: {
          false: {
            modal: 'sm:max-w-3xl h-full sm:h-[28rem]'
          }
        },
        size: {
          xs: {},
          sm: {},
          md: {},
          lg: {},
          xl: {}
        }
      },
      defaultVariants: {
        size: 'md'
      }
    }
  }
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import ui from '@nuxt/ui/vite'

export default defineConfig({
  plugins: [
    vue(),
    ui({
      ui: {
        contentSearch: {
          slots: {
            modal: '',
            input: ''
          },
          variants: {
            fullscreen: {
              false: {
                modal: 'sm:max-w-3xl h-full sm:h-[28rem]'
              }
            },
            size: {
              xs: {},
              sm: {},
              md: {},
              lg: {},
              xl: {}
            }
          },
          defaultVariants: {
            size: 'md'
          }
        }
      }
    })
  ]
})

Wijzigingsgelog

No recent changes

ContentNavigation

An accordion-style navigation component for organizing page links.

ContentSearchButton

A pre-styled Button to open the ContentSearch modal.