DashboardSearch^PRO

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>

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
`icon`	`appConfig.ui.icons.search`	`string` The icon displayed in the input.
`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`	`string` The icon when the `loading` prop is `true`.
`close`	`true`	`boolean \| Partial<ButtonProps>` Display a close button in the input (useful when inside a Modal for example). `{ size: 'md', color: 'neutral', variant: 'ghost' }`
`closeIcon`	`appConfig.ui.icons.close`	`string` The icon displayed in the close button.
`shortcut`	`'meta_k'`	`string` Keyboard shortcut to open the search (used by `defineShortcuts`)
`groups`		`CommandPaletteGroup<CommandPaletteItem>[]`
`fuse`	`{}`	`UseFuseOptions<CommandPaletteItem>` Options for useFuse passed to the CommandPalette.
`colorMode`	`true`	`boolean` When `true`, the theme command will be added to the groups.
`open`		`boolean`
`searchTerm`		`string`
`ui`		`{ modal?: ClassNameValue; input?: ClassNameValue; } & { root?: ClassNameValue; input?: ClassNameValue; close?: ClassNameValue; ... 19 more ...; itemLabelSuffix?: ClassNameValue; }`

Slots

Slot	Type
`empty`	`{ searchTerm?: string \| undefined; }`
`close`	`{ ui: { root: (props?: Record<string, any> \| undefined) => string; input: (props?: Record<string, any> \| undefined) => string; close: (props?: Record<string, any> \| undefined) => string; ... 19 more ...; itemLabelSuffix: (props?: Record<...> \| undefined) => string; }; }`
`item`	`{ item: CommandPaletteItem; index: number; }`
`item-leading`	`{ item: CommandPaletteItem; index: number; }`
`item-label`	`{ item: CommandPaletteItem; index: number; }`
`item-trailing`	`{ item: CommandPaletteItem; index: number; }`
`content`	`{}`

Emits

Event	Type
`update:open`	`[value: boolean]`
`update:searchTerm`	`[value: string]`

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

DashboardResizeHandle

A handle to resize a sidebar or panel.

DashboardSearchButton

A pre-styled Button to open the DashboardSearch modal.

DashboardSearchPRO

DashboardSearch^PRO