v-command-palette

A command palette for Vuetify.

https://github.com/wobsoriano/v-command-palette/assets/13049130/f99bccff-acde-422c-a30b-1a53bac0ffa0

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