Vue & Nuxt

Qikbar doesn’t need a Vue wrapper. Create it once and use it from anywhere.

import { createQikbar } from '@qikbar/qikbar'
import { calculator, themeSwitcher } from '@qikbar/qikbar/extensions'
import router from './router'

export const bar = createQikbar({
  navigate: (href) => router.push(href),
  routes: router.getRoutes()
    .filter((r) => r.meta?.title)
    .map((r) => ({ path: r.path, title: String(r.meta.title), icon: (r.meta.icon as string) ?? 'file' })),
  extensions: [calculator(), themeSwitcher()],
})

import './command-bar'

A composable for contextual commands

import { onMounted, onUnmounted, watch, type Ref } from 'vue'
import type { Command } from '@qikbar/qikbar'
import { bar } from '../command-bar'

export function useCommands(commands: Ref<Command[]> | Command[]) {
  let off: (() => void) | undefined
  const register = (cmds: Command[]) => {
    off?.()
    off = bar.register(cmds)
  }
  if (Array.isArray(commands)) onMounted(() => register(commands))
  else watch(commands, register, { immediate: true })
  onUnmounted(() => off?.())
}

<script setup lang="ts">
import { computed } from 'vue'
import { useCommands } from '@/composables/useCommands'
const props = defineProps<{ project: { id: string; name: string } }>()
useCommands(computed(() => [{ title: `Archive ${props.project.name}`, icon: 'trash', run: () => archive(props.project.id) }]))
</script>

Trigger button

<button data-qikbar-open>Search… <kbd>⌘K</kbd></button>

Nuxt

Create a client-only plugin:

import { createQikbar } from '@qikbar/qikbar'

export default defineNuxtPlugin(() => {
  const bar = createQikbar({ navigate: (href) => navigateTo(href), autoIndex: true })
  return { provide: { qikbar: bar } }
})

Add an AI endpoint in server/api/qikbar.post.ts:

import { createHandler, anthropic } from '@qikbar/qikbar/server'
const handler = createHandler({ provider: anthropic({ apiKey: process.env.ANTHROPIC_API_KEY }) })
export default defineEventHandler((event) => handler(toWebRequest(event)))