DashboardSearchPRO
A ready to use CommandPalette to add to your dashboard.
Usage
The DashboardSearch component extends the CommandPalette component, so you can pass any property such as icon
, placeholder
, etc.
Use it inside the default slot of the DashboardGroup component:
layouts/dashboard.vue
<template>
<UDashboardGroup>
<UDashboardSidebar>
<UDashboardSearchButton />
</UDashboardSidebar>
<UDashboardSearch />
<slot />
</UDashboardGroup>
</template>
You can open the CommandPalette by pressing K, by using the DashboardSearchButton component or by using a
v-model:open
directive.Shortcut
Use the shortcut
prop to change the shortcut used in defineShortcuts to open the ContentSearch component. Defaults to meta_k
( K).
app.vue
<template>
<UDashboardSearch
v-model:search-term="searchTerm"
shortcut="meta_k"
:groups="groups"
:fuse="{ resultLimit: 42 }"
/>
</template>
Color Mode
By default, a group of commands will be added to the command palette so you can switch between light and dark mode. This will only take effect if the colorMode
is not forced in a specific page which can be achieved through definePageMeta
:
pages/index.vue
<script setup lang="ts">
definePageMeta({
colorMode: 'dark'
})
</script>
You can disable this behavior by setting the color-mode
prop to false
:
app.vue
<template>
<UDashboardSearch
v-model:search-term="searchTerm"
:color-mode="false"
:groups="groups"
:fuse="{ resultLimit: 42 }"
/>
</template>
API
Props
Prop | Default | Type |
---|
Slots
Slot | Type |
---|
Emits
Event | Type |
---|
Theme
app.config.ts
export default defineAppConfig({
uiPro: {
dashboardSearch: {
slots: {
modal: 'sm:max-w-3xl sm:h-[28rem]',
input: '[&>input]:text-base/5'
}
}
}
})
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({
uiPro: {
dashboardSearch: {
slots: {
modal: 'sm:max-w-3xl sm:h-[28rem]',
input: '[&>input]:text-base/5'
}
}
}
})
]
})
vite.config.ts
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
import uiPro from '@nuxt/ui-pro/vite'
export default defineConfig({
plugins: [
vue(),
uiPro({
uiPro: {
dashboardSearch: {
slots: {
modal: 'sm:max-w-3xl sm:h-[28rem]',
input: '[&>input]:text-base/5'
}
}
}
})
]
})