wobsoriano / v-command-palette

A cmd+k component for Vuetify

v-command-palette

A command palette for Vuetify.

Screen.Recording.2023-12-22.at.3.29.56.PM.mov

Installation

npm install v-command-palette

Usage

Import the component at the root of your app

<script setup>
import { VCommandPalette, createCommand } from 'v-command-palette'

const commands = [
  createCommand({
    title: 'Home',
    icon: 'mdi-home',
    command() { /** do something */ },
    section: 'Navigation',
    shortcut: ['h'],
  }),
  createCommand({
    title: 'Docs',
    icon: 'mdi-book',
    command() { /** do something */ },
    section: 'Navigation',
    shortcut: ['g', 'd'],
  }),
]
</script>

<template>
  <VApp>
    <VMain>
      <VCommandPalette :commands="commands" />
    </VMain>
  </VApp>
</template>

Props

Name	Type	Default	Description
commands	array	[]	The list of commands to display. See the Command interface.
textFieldProps	object	{}	VTextField props
dialogProps	object	{}	VDIalog props
cardProps	object	{}	VCard props
cardTextProps	object	{}	VCardText props
fuseOptions	object	{}	Fuse.js options

Composables

• useCommandPalette - Programmaticaly open or close the dialog.

License

MIT

v-command-palette's Issues

How to use esc button in input text? is there any slots available?

I want to use this palette, but are there any options for customizing inputs like search results or default suggestions?

Slots are best.

[Bug] Ctrl+K focuses address bar on Firefox

This doesn't appear to happen on other sites I tried this on (Vuetify, Prime Vue, and Mantine) 🤔

Maybe a default behavior that's not being blocked or prevented?

2024-01-01_gE0cQec6gM.mp4