@kleroai/vue

Official Vue 3 SDK for Klero — embed feedback boards, roadmaps, changelogs, surveys, and widgets in your Vue app.

Installation

npm install @kleroai/vue

Quick Start

Plugin approach

import { createApp } from 'vue';
import { KleroPlugin } from '@kleroai/vue';

const app = createApp(App);
app.use(KleroPlugin, { projectSlug: 'your-project' });
app.mount('#app');

Provider approach

<script setup>
import { KleroProvider, KleroFeedback, KleroWidget } from '@kleroai/vue';
</script>

<template>
  <KleroProvider project-slug="your-project">
    <KleroFeedback />
    <KleroWidget />
  </KleroProvider>
</template>

Components

<KleroProvider>

| Prop | Type | Required | Description | |------|------|----------|-------------| | project-slug | string | Yes | Your Klero project slug | | base-url | string | No | Custom base URL | | customer-token | string | No | JWT for authenticated users | | login-url | string | No | Login redirect URL |

<KleroFeedback />, <KleroChangelog />

Inline embeds. No additional props required.

<KleroRoadmap />

| Prop | Type | Description | |------|------|-------------| | roadmap-slug | string | Specific roadmap to display |

<KleroWidget />

No additional props. Appearance and tabs are configured in the dashboard.

<KleroSurvey />

| Prop | Type | Required | |------|------|----------| | survey-ulid | string | Yes |

| Event | Payload | |-------|---------| | @complete | { surveyUlid, responseUlid, answers } | | @close | { surveyUlid, completed } | | @error | { surveyUlid, error } |

Composables

useKleroSurvey()

const { open, close } = useKleroSurvey();
open('survey-ulid');

useKleroWidget()

const { open, close } = useKleroWidget();
open();

SSR Support

All components are SSR-safe (Nuxt compatible). DOM access only in onMounted.

License

MIT