Vue Command Palette: A fast, composable command palette for vue

Command palette interfaces are used to create a web experience where users can quickly get in charge of using applications with keyboard shortcuts, rather than using the mouse.

With macOS's Alfred and Raycast's command palette experience in mind, vue-command-palette is designed to provide a fast, composable, unstyled command palette to your site.

Installation

//yarn
yarn add vue-command-palette

//pnpm
pnpm add vue-command-palette

Usage

you can import the Command Compound Component in your project.

<template>
  <Command theme="custom">
    <Command.Input placeholder="Type a command or search..." />
    <Command.List>
      <Command.Empty>No results found.</Command.Empty>

      <Command.Group heading="Letters">
        <Command.Item>a</Command.Item>
        <Command.Item>b</Command.Item>
        <Command.Separator />
        <Command.Item>c</Command.Item>
      </Command.Group>

      <Command.Item>Apple</Command.Item>
    </Command.List>
  </Command>
</template>

<script lang="ts" setup>
import { ref } from 'vue'import { Command } from 'vue-command-palette'</script>

<style>
// import your custom css
@import '~/assets/css/custom.css';
</style>

or in a dialog

<template>
  <Command.Dialog :visible="visible" theme="custom">
    <template #header>
      <Command.Input placeholder="Type a command or search..." />
    </template>
    <template #body>
      <Command.List>
        <Command.Empty>No results found.</Command.Empty>

        <Command.Group heading="Letters">
          <Command.Item>a</Command.Item>
          <Command.Item>b</Command.Item>
          <Command.Separator />
          <Command.Item>c</Command.Item>
        </Command.Group>

        <Command.Item>Apple</Command.Item>
      </Command.List>
    </template>
  </Command.Dialog>
</template>

<script lang="ts" setup>
import { ref } from 'vue'import { Command } from 'vue-command-palette'const visible = ref(false)
</script>

<style>
// import your custom css
@import '~/assets/css/custom.css';
</style>

Now we start our command palette with command + K

You may ask that can the trigger command key be changed? Absolutely!

Now let’s try to change the key from K to P

Tips, we use @vueuse/core to bind the keybindings

<script lang="ts" setup>
  import { watch } from 'vue'
  import { useMagicKeys } from '@vueuse/core'

  const keys = useMagicKeys()
  const CmdP = keys['Meta+P']

  watch(CmdK, (v) => {
    if (v) {
      console.log('Meta + P has been pressed')
      // you can add your logic here
    }
  })
</script>

Now you are all setup to start using your command palette.

Conclusion

Hope you enjoyed reading on this amazing plugin. A lot of popular websites like tailwindui have adopted command palettes so i can say that its awesome and you can try it too.