@peekjs/vue

Vue bindings for Peek — live link-hover previews.

Install

npm install @peekjs/vue

Option A — plugin + <PeekLink> (recommended)

Register the plugin once in main.ts, then use <PeekLink> anywhere:

// main.ts
import { createApp } from 'vue';
import { createPeek } from '@peekjs/vue';
import App from './App.vue';

createApp(App)
  .use(createPeek({ delay: 200 }))
  .mount('#app');

<!-- Standard renderer (iframe / card) -->
<PeekLink href="https://example.com">Visit site</PeekLink>

<!-- Custom Vue component card -->
<PeekLink href="/user/1" :data="user">
  Jane Doe
  <template #content="{ data }">
    <UserCard :user="data" />
  </template>
</PeekLink>

Option B — usePeek composable

<script setup>
import { usePeek } from '@peekjs/vue';
usePeek({ selector: 'a[data-peek]', delay: 200 });
</script>

Option C — v-peek directive

<div v-peek="{ selector: 'a[data-peek]', delay: 200 }">
  <a href="/docs" data-peek>Docs</a>
</div>

Options

All @peekjs/core options are accepted.

Links

• Full docs & demo
• GitHub