ContentSearch

CommandéeGitHub à
Une CommandPalette prête à l
Ce composant est uniquement disponible lorsque le module @nuxt/content est installé.

Utilisation

Le composant ContentSearch étend le composant CommandPalette avec un support de recherche intégré @nuxt/content, Il prend en charge à la fois le filtrage côté client Fuse.js et le filtrage côté serveur FTS5 full-text search. Vous pouvez passer n'importe quelle propriété CommandPalette telle que icon, placeholder, etc.

Vous pouvez ouvrir la CommandPalette en appuyant sur: kbd{value="meta"}: kbd{value="K" class="ms-px"}, en utilisant le composant ContentSearchButton ou en utilisant le composable useContentSearch: const { open } = useContentSearch().
Il est recommandé d'envelopper le composant ContentSearch dans un composant ClientOnly afin qu 'il ne soit pas rendu sur le serveur.

Navigation

Utilisez la prop navigation avec queryCollectionNavigation pour regrouper les résultats de recherche par section:

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

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

Files

Utilisez la prop files avec queryCollectionSearchSections pour charger toutes les sections de recherche à l'avance et utilisez le filtrage côté client Fuse.js:

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>
Utilisez la prop fuse pour configurer les options useFuse passées au sous-jacent [CommandPalette](/docs/components/command-paletteph11x, telles que resultLimit (par défaut 12) et fuseOptions.threshold (par défaut 0.1).

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

Utilisez la prop search avec useSearchCollection pour la recherche côté serveur FTS5 en texte intégral avec des extraits surlignés au lieu du filtrage côté client:

Nécessite @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>
Passez search-status pour que le composant puisse automatiquement relancer la recherche une fois que l'index est prêt. Utilisez search-delay (par défaut 100ms) pour contrôler la durée de pause de la saisie avant le déclenchement de la recherche. L'option fuse.resultLimit plafonne le total des résultats renvoyés dans tous les groupes (résultats de recherche, liens, thème, etc.).
Lorsque vous utilisez la prop search, vous n'avez pas besoin de passer files. Le composant appelle la fonction de recherche asynchrone sur chaque touche au lieu de Fuse.js. Les résultats sont automatiquement mappés et regroupés par navigation avec des extraits surlignés. Contrairement à l'approche files qui charge toutes les sections de recherche à l'avance et vous permet de parcourir les éléments de navigation avant de taper, la prop search ne renvoie les résultats qu 'après la saisie d'une requête.

raccourci

Utilisez la prop shortcut pour modifier le raccourci utilisé dans defineShortcuts pour ouvrir le composant ContentSearch. Defaults à meta_k (: kbd{value="meta"}: kbd{value="K"}).

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

Liens

Utilisez la prop links pour ajouter un groupe de liens d'accès rapide en haut de la palette de commandes:

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>

XPH213XColor mode

Par défaut, un groupe de commandes sera ajouté à la palette de commandes afin que vous puissiez basculer entre le mode clair et sombre. Cela ne prendra effet que si le colorMode n'est pas forcé dans une page spécifique, ce qui peut être réalisé via definePageMeta:

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

Vous pouvez désactiver ce comportement en définissant la prop color-mode sur false:

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

API

Props équipement

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; }

Emis

Event Type
update:searchTerm
[value: string]

Expose à

Lorsque vous accédez au composant via une référence de modèle, vous pouvez utiliser les éléments suivants:

nomtype
commandPaletteRefRef<InstanceType<typeof UCommandPalette> | null>x{lang="ts-type"}

Thème

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'
          }
        }
      }
    })
  ]
})

Changelog écrit

No recent changes

ContentNavigation

An accordion-style navigation component for organizing page links.

ContentSearchButton

A pre-styled Button to open the ContentSearch modal.