{"id":13606888,"url":"https://github.com/xiaoluoboding/vue-command-palette","last_synced_at":"2026-02-12T10:30:17.509Z","repository":{"id":59379970,"uuid":"530924867","full_name":"xiaoluoboding/vue-command-palette","owner":"xiaoluoboding","description":"⌨️ A fast, composable, unstyled command palette interface for Vue.","archived":false,"fork":false,"pushed_at":"2024-03-08T08:06:09.000Z","size":11342,"stargazers_count":554,"open_issues_count":9,"forks_count":26,"subscribers_count":3,"default_branch":"main","last_synced_at":"2025-01-31T08:06:42.785Z","etag":null,"topics":["cmdk","command","palette","vue3"],"latest_commit_sha":null,"homepage":"https://vue-command-palette.robertshaw.id/","language":"Vue","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/xiaoluoboding.png","metadata":{"files":{"readme":"README.md","changelog":"CHANGELOG.md","contributing":null,"funding":".github/FUNDING.yml","license":"LICENSE","code_of_conduct":null,"threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null},"funding":{"github":["xiaoluoboding"]}},"created_at":"2022-08-31T03:40:56.000Z","updated_at":"2025-01-29T06:09:24.000Z","dependencies_parsed_at":"2024-01-14T05:00:06.671Z","dependency_job_id":"22d69029-7225-4908-a748-5dfd7b0aa9b5","html_url":"https://github.com/xiaoluoboding/vue-command-palette","commit_stats":{"total_commits":47,"total_committers":4,"mean_commits":11.75,"dds":0.06382978723404253,"last_synced_commit":"087705fa2b36f1e3f27b0706489ad8eabc88fa82"},"previous_names":[],"tags_count":7,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-command-palette","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-command-palette/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-command-palette/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/xiaoluoboding%2Fvue-command-palette/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/xiaoluoboding","download_url":"https://codeload.github.com/xiaoluoboding/vue-command-palette/tar.gz/refs/heads/main","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":239809563,"owners_count":19700642,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["cmdk","command","palette","vue3"],"created_at":"2024-08-01T19:01:13.484Z","updated_at":"2026-02-12T10:30:17.476Z","avatar_url":"https://github.com/xiaoluoboding.png","language":"Vue","readme":"# Command Palette for Vue\n\n[![NPM][npmBadge]][npmUrl]\n[![Minzip Package][bundlePhobiaBadge]][bundlePhobiaUrl]\n[![NPM Download][npmDtBadge]][npmDtUrl]\n\n[npmBadge]: https://img.shields.io/npm/v/vue-command-palette.svg?maxAge=2592000\n[npmUrl]: https://www.npmjs.com/package/vue-command-palette\n[npmDtBadge]: https://img.shields.io/npm/dt/vue-command-palette.svg\n[npmDtUrl]: https://www.npmjs.com/package/vue-command-palette\n[bundlePhobiaBadge]: https://img.shields.io/bundlephobia/minzip/vue-command-palette\n[bundlePhobiaUrl]: https://bundlephobia.com/package/vue-command-palette@latest\n\n\u003e A fast, composable, unstyled `Command` + `K` interface (Command Palette) for Vue.\n\n## Preview\n\n![Preview](vue-command-palette.gif)\n\n## Concepts\n\nCommand palette interfaces are used to create a web experience where users can quickly get in charge with keyboard shortcuts, rather than using the mouse.\n\nWith macOS's `Spotlight` and `Raycast`'s command palette experience in mind, `vue-command-palette` is designed to provide a fast, composable, unstyled command palette to your site.\n\n## Table of Contents\n\n\u003cdetails\u003e\n\n\u003csummary\u003eTOC\u003c/summary\u003e\n\n- [Command Palette for Vue](#command-palette-for-vue)\n  - [Preview](#preview)\n  - [Concepts](#concepts)\n  - [Table of Contents](#table-of-contents)\n  - [Features](#features)\n  - [Install](#install)\n  - [Usage](#usage)\n    - [Command + K or ?](#command--k-or-)\n    - [Events](#events)\n    - [Styling](#styling)\n    - [Animation](#animation)\n      - [Command.Dialog](#commanddialog)\n      - [List Item Height](#list-item-height)\n  - [Namespaced components](#namespaced-components)\n    - [Command `[command-root=\"\"]`](#command-command-root)\n    - [Command.Dialog `[command-dialog=\"\"]`](#commanddialog-command-dialog)\n    - [Command.Input `[command-input=\"\"]`](#commandinput-command-input)\n    - [Command.List `[command-list=\"\"]`](#commandlist-command-list)\n    - [Command.Group `[command-group=\"\"]`](#commandgroup-command-group)\n    - [Command.Item `[command-item=\"\"]`](#commanditem-command-item)\n    - [Command.Separator `[command-separator=\"\"]`](#commandseparator-command-separator)\n    - [Command.Empty `[command-empty=\"\"]`](#commandempty-command-empty)\n    - [Command.Loading `[command-loading=\"\"]`](#commandloading-command-loading)\n  - [Inspiration](#inspiration)\n  - [License](#license)\n\n\u003c/details\u003e\n\n## Features\n\n- 🧩 [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) + [Namespaced Components](https://vuejs.org/api/sfc-script-setup.html#using-components) Design\n- 💄 Completely unstyled, but more customizable\n- 🔍 Fuzzy search support to find relevant command\n- ⌨️ keyboard shortcut support to bind custom keybindings to your command\n\n## Install\n\n```bash\nyarn add vue-command-palette\n# or\npnpm add vue-command-palette\n```\n\n## Usage\n\nThen you can import the `Command` [Compound Component](https://kentcdodds.com/blog/compound-components-with-react-hooks) in your project.\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref } from 'vue'\nimport { Command } from 'vue-command-palette'\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cCommand theme=\"custom\"\u003e\n    \u003cCommand.Input placeholder=\"Type a command or search...\" /\u003e\n    \u003cCommand.List\u003e\n      \u003cCommand.Empty\u003eNo results found.\u003c/Command.Empty\u003e\n\n      \u003cCommand.Group heading=\"Letters\"\u003e\n        \u003cCommand.Item\u003ea\u003c/Command.Item\u003e\n        \u003cCommand.Item\u003eb\u003c/Command.Item\u003e\n        \u003cCommand.Separator /\u003e\n        \u003cCommand.Item\u003ec\u003c/Command.Item\u003e\n      \u003c/Command.Group\u003e\n\n      \u003cCommand.Item\u003eApple\u003c/Command.Item\u003e\n    \u003c/Command.List\u003e\n  \u003c/Command\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n// import your custom css\n@import '~/assets/css/custom.css';\n\u003c/style\u003e\n```\n\nor in a dialog:\n\n```vue\n\u003cscript lang=\"ts\" setup\u003e\nimport { ref } from 'vue'\nimport { Command } from 'vue-command-palette'\n\nconst visible = ref(false)\n\u003c/script\u003e\n\n\u003ctemplate\u003e\n  \u003cCommand.Dialog :visible=\"visible\" theme=\"custom\"\u003e\n    \u003ctemplate #header\u003e\n      \u003cCommand.Input placeholder=\"Type a command or search...\" /\u003e\n    \u003c/template\u003e\n    \u003ctemplate #body\u003e\n      \u003cCommand.List\u003e\n        \u003cCommand.Empty\u003eNo results found.\u003c/Command.Empty\u003e\n\n        \u003cCommand.Group heading=\"Letters\"\u003e\n          \u003cCommand.Item\u003ea\u003c/Command.Item\u003e\n          \u003cCommand.Item\u003eb\u003c/Command.Item\u003e\n          \u003cCommand.Separator /\u003e\n          \u003cCommand.Item\u003ec\u003c/Command.Item\u003e\n        \u003c/Command.Group\u003e\n\n        \u003cCommand.Item\u003eApple\u003c/Command.Item\u003e\n      \u003c/Command.List\u003e\n    \u003c/template\u003e\n  \u003c/Command.Dialog\u003e\n\u003c/template\u003e\n\n\u003cstyle\u003e\n// import your custom css\n@import '~/assets/css/custom.css';\n\u003c/style\u003e\n```\n\n### \u003ckbd\u003eCommand\u003c/kbd\u003e + \u003ckbd\u003eK\u003c/kbd\u003e or ?\n\nDo I have to use command + K? No, it's just a convention that you can use any key binding to perform the Command Palette.\n\n\u003e Tips, we use `@vueuse/core` to bind the keybindings\n\n```html\n\u003cscript lang=\"ts\" setup\u003e\n  import { watch } from 'vue'\n  import { useMagicKeys } from '@vueuse/core'\n\n  const keys = useMagicKeys()\n  const CmdK = keys['Meta+K']\n\n  watch(CmdK, (v) =\u003e {\n    if (v) {\n      console.log('Meta + K has been pressed')\n      // do your own logic, maybe make dialog visible\n    }\n  })\n\u003c/script\u003e\n```\n\n### Events\n\n|     Name      | Description                                                           | Parameters       |\n| :-----------: | --------------------------------------------------------------------- | :--------------- |\n| `select-item` | Every time an item is being selected in `Command` or `Command.Dialog` | `(item) =\u003e void` |\n\n### Styling\n\nAll namespaced components have a specific `data-attribute` starting with `command-` that can be used for styling.\n\neg:\n\n```css\ndiv[command-root=''] {\n  background: #ffffff;\n}\n```\n\n### Animation\n\n#### Command.Dialog\n\n`Command.Dialog` wraped by built-in components [Transition](https://vuejs.org/guide/built-ins/transition.html), you can customize the animation using the name `command-dialog` .\n\n[Example Code](https://github.com/xiaoluoboding/vue-command-palette/blob/main/src/assets/scss/algolia.scss#L193)\n\n#### List Item Height\n\nAnimate height using the `--command-list-height` CSS variable.\n\n[Example Code](https://github.com/xiaoluoboding/vue-command-palette/blob/main/src/assets/scss/algolia.scss#L26)\n\n## Namespaced components\n\nWith [Namespaced components](https://vuejs.org/api/sfc-script-setup.html#using-components), You can use component tags with dots like `\u003cFoo.Bar\u003e` to refer to components nested under object properties. This is useful when you import multiple components from a single file.\n\n### Command `[command-root=\"\"]`\n\nThe root component, Passes the `theme` props to set your own style.\n\n```vue\n\u003cCommand theme=\"custom\"\u003e\n  \u003c!-- Contains other namespaced components --\u003e\n\u003c/Command\u003e\n```\n\n### Command.Dialog `[command-dialog=\"\"]`\n\nThe root component with a dialog interface, [Teleport](https://vuejs.org/guide/built-ins/teleport.html) dialog to `body` tag. Passes the `theme` props to set your own style, and `visible` props control whether render it.\n\n```vue\n\u003cCommand.Dialog :visible=\"visible\" theme=\"custom\"\u003e\n  \u003c!-- Contains other namespaced components --\u003e\n  \u003ctemplate #header\u003e\u003c/template\u003e\n  \u003ctemplate #body\u003e\u003c/template\u003e\n  \u003ctemplate #footer\u003e\u003c/template\u003e\n\u003c/Command.Dialog\u003e\n```\n\n`data-attribute` within dialog\n\n- `[command-dialog-mask]` - the mask is always rendered.\n- `[command-dialog-wrapper]` - the wrapper on top of mask.\n- `[command-dialog-header]` - the parent of dialog header slot.\n- `[command-dialog-body]` - the parent of dialog body slot.\n- `[command-dialog-footer]` - the parent of dialog footer slot.\n\n### Command.Input `[command-input=\"\"]`\n\nUsually we need a input in the command palette to search sth.\n\n```vue\n\u003cCommand.Input\n  placeholder=\"Type a command or search...\"\n  v-model:value=\"inputValue\"\n/\u003e\n```\n\n### Command.List `[command-list=\"\"]`\n\nContains items and groups. Animate height using the `--command-list-height` CSS variable.\n\n```css\n[command-list] {\n  min-height: 300px;\n  height: var(--command-list-height);\n  max-height: 500px;\n  transition: height 100ms ease;\n}\n```\n\n```vue\n\u003cCommand.List\u003e\n  \u003c!-- Contains Group, Item, Empty --\u003e\n\u003c/Command.List\u003e\n```\n\n### Command.Group `[command-group=\"\"]`\n\nGroup items (`[command-group-items]`) together with the given `heading` (`[command-group-heading]`)\n\n```vue\n\u003cCommand.Group heading=\"Perference\"\u003e\n  \u003cCommand.Item\u003eToggle Dark Mode\u003c/Command.Item\u003e\n  \u003cCommand.Item\u003eChange Language\u003c/Command.Item\u003e\n\u003c/Command.Group\u003e\n```\n\n### Command.Item `[command-item=\"\"]`\n\nPassed the `data-value`, we use `data-value` to fetch the value.\n\n```vue\n\u003cCommand.Item\n  v-for=\"item in items\"\n  :data-value=\"item.label\"\n  :shortcut=\"item.shortcut\"\n  :perform=\"item.perform\"\n  @select=\"(itemInfo) =\u003e console.log('selected', itemInfo)\"\n  // the itemInfo.value is some as `data-value`\n\u003e\n  {{ item.label }}\n\u003c/Command.Item\u003e\n```\n\n### Command.Separator `[command-separator=\"\"]`\n\nUsually used to distinguish between different groups\n\n### Command.Empty `[command-empty=\"\"]`\n\nAutomatically renders when there are no results for the search query.\n\n### Command.Loading `[command-loading=\"\"]`\n\nYour should manually control `loading`\n\n## Inspiration\n\n- [cmdk](https://github.com/pacocoursey/cmdk) - Fast, unstyled command menu React component.\n- [kbar](https://github.com/timc1/kbar) - fast, portable, and extensible cmd+k interface for your site.\n\n## License\n\nMIT [@xiaoluoboding](https://github.com/xiaoluoboding)\n","funding_links":["https://github.com/sponsors/xiaoluoboding"],"categories":["Libraries","Vue"],"sub_categories":["Vue"],"project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fvue-command-palette","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fxiaoluoboding%2Fvue-command-palette","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fxiaoluoboding%2Fvue-command-palette/lists"}