Usage
The DashboardSearch component provides a searchable command palette for dashboards, built on top of the CommandPalette component.
<template>
<UDashboardSearch
v-model:open="searchOpen"
:groups="searchGroups"
/>
</template>
<script setup lang="ts">
const searchOpen = ref(false)
const searchGroups = [
{
id: 'actions',
label: 'Actions',
items: [
{ label: 'New Project', icon: 'i-heroicons-folder-plus', to: '/projects/new' },
{ label: 'Settings', icon: 'i-heroicons-cog-6-tooth', to: '/settings' },
{ label: 'Help', icon: 'i-heroicons-question-mark-circle', to: '/help' }
]
}
]
</script>
Keyboard Shortcut
The search opens with Cmd+K (Mac) or Ctrl+K (Windows/Linux) by default.
<UDashboardSearch
:groups="searchGroups"
shortcut="meta_k"
/>
<UDashboardSearch
:groups="searchGroups"
shortcut="ctrl_p"
/>
Search Groups
Organize search items into groups.
<UDashboardSearch :groups="searchGroups" />
<script setup lang="ts">
const searchGroups = [
{
id: 'pages',
label: 'Pages',
items: [
{ label: 'Dashboard', icon: 'i-heroicons-home', to: '/dashboard' },
{ label: 'Projects', icon: 'i-heroicons-folder', to: '/projects' },
{ label: 'Team', icon: 'i-heroicons-user-group', to: '/team' }
]
},
{
id: 'actions',
label: 'Actions',
items: [
{ label: 'New Project', icon: 'i-heroicons-plus', onSelect: () => createProject() },
{ label: 'Upload File', icon: 'i-heroicons-arrow-up-tray', onSelect: () => uploadFile() }
]
}
]
function createProject() {
console.log('Creating new project...')
}
function uploadFile() {
console.log('Uploading file...')
}
</script>
Fuzzy Search
Configure fuzzy search options using the fuse prop.
<UDashboardSearch
:groups="searchGroups"
:fuse="{
fuseOptions: {
threshold: 0.3,
keys: ['label', 'description']
}
}"
/>
Color Mode Switcher
The component includes a built-in theme switcher. Disable it if needed:
<UDashboardSearch
:groups="searchGroups"
:color-mode="false"
/>
Size Variants
Control the modal size.
<UDashboardSearch
:groups="searchGroups"
size="lg"
/>
Loading State
Show a loading indicator while fetching results.
<UDashboardSearch
:groups="searchGroups"
:loading="isLoading"
loading-icon="i-heroicons-arrow-path"
/>
<script setup lang="ts">
const isLoading = ref(false)
</script>
Custom Placeholder
<UDashboardSearch
:groups="searchGroups"
placeholder="Search for pages, actions, or settings..."
/>
<UDashboardSearch
:groups="searchGroups"
:close="false"
/>
Custom Slots
Customize the appearance using slots.
<UDashboardSearch :groups="searchGroups">
<template #item="{ item }">
<div class="flex items-center gap-2">
<UIcon v-if="item.icon" :name="item.icon" />
<span class="font-medium">{{ item.label }}</span>
<UBadge v-if="item.badge" :label="item.badge" size="xs" />
</div>
</template>
</UDashboardSearch>
Programmatic Control
Control the search programmatically.
<template>
<div>
<UButton label="Open Search" @click="searchOpen = true" />
<UDashboardSearch
v-model:open="searchOpen"
v-model:search-term="searchTerm"
:groups="searchGroups"
/>
</div>
</template>
<script setup lang="ts">
const searchOpen = ref(false)
const searchTerm = ref('')
</script>
Props
icon
string
default:"appConfig.ui.icons.search"
The icon displayed in the input.
placeholder
string
default:"t('commandPalette.placeholder')"
The placeholder text for the input.
Automatically focus the input when component is mounted.
loadingIcon
string
default:"appConfig.ui.icons.loading"
The icon when loading is true.
close
boolean | ButtonProps
default:"true"
Display a close button in the input.
closeIcon
string
default:"appConfig.ui.icons.close"
The icon displayed in the close button.
Keyboard shortcut to open the search.
Array of search groups and items.
fuse
UseFuseOptions
default:"{}"
Options for fuzzy search passed to useFuse.
Include the theme switcher in the search results.
Show overlay behind modal.
Enable transition animation.
Allow dismissing the modal.
Display in fullscreen mode.
Custom class to apply to the root element.
Override default theme classes.
Models
Controls whether the search modal is open.
Slots
Inherits all slots from CommandPalette component:
Customize the entire modal content.
Customize individual search result items.
Customize the empty state.
Expose
commandPaletteRef
Ref<CommandPaletteInstance>
Reference to the CommandPalette component instance.