@action-finder/vue

Vue 3 command palette plugin with built-in UI, route indexing, searchable actions, and DOM-action helpers.

Install

pnpm add @action-finder/vue

Quick start

import { createApp } from 'vue';
import type { SearchItem } from '@action-finder/core';
import { ActionFinder } from '@action-finder/vue';
import App from './App.vue';
import router from './router';

const items: SearchItem[] = [
  {
    id: 'ticket-create-static',
    title: 'Create ticket',
    subtitle: 'Ticket management',
    group: 'action',
    path: '/tickets',
    dataKey: 'ticket-create-action'
  }
];

createApp(App)
  .use(router)
  .use(ActionFinder, {
    router,
    title: 'Action Finder',
    shortcut: 'mod+k',
    placeholder: 'Search pages and actions...',
    items
  })
  .mount('#app');

In a component

<script setup lang="ts">
import { ActionFinderSearch, useActionFinder } from '@action-finder/vue';

const actionFinder = useActionFinder();
</script>

<template>
  <button @click="actionFinder.open()">Open</button>
  <ActionFinderSearch />
</template>

Register an action with v-searchable

<button
  data-action-finder="ticket-export-action"
  v-searchable="{ title: 'Export tickets', keywords: ['ticket export'] }"
  @click="handleExport"
>
  Export
</button>

Exports

• ActionFinder
• useActionFinder
• ActionFinderSearch
• ACTION_FINDER_KEY
• ActionFinderContext
• ActionFinderPluginOptions
• ActionFinderRouterLike

For shared types and action helpers, see @action-finder/core.

Repository and full docs:

• https://codeup.aliyun.com/605efecf7470561e6a71441e/taixiaoyou.git