Vue SDK

Integrate Klero feedback, roadmap, changelog, surveys, and widgets into your Vue application.

Requirements

• Vue >= 3.3.0

Installation

npm install @kleroai/vue

Quick Start

Any Module with KleroEmbed

KleroEmbed is the generic component that supports all Klero module types. Convenience components are also provided.

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

<template>
  <!-- Using the generic component -->
  <KleroEmbed project-slug="myproject" embed-type="feedback" />

  <!-- Or use convenience components -->
  <KleroFeedback project-slug="myproject" />
  <KleroRoadmap project-slug="myproject" />
  <KleroChangelog project-slug="myproject" />
  <KleroWidget project-slug="myproject" />
</template>

Survey with KleroSurvey

For surveys, use the dedicated KleroSurvey component which provides survey-specific event callbacks:

<script setup>
import { KleroSurvey } from '@kleroai/vue';

function handleComplete(data) {
  console.log('Completed:', data.responseUlid);
  console.log('Answers:', data.answers);
}

function handleClose(data) {
  console.log('Closed, completed:', data.completed);
}

function handleError(error) {
  console.error('Error:', error);
}
</script>

<template>
  <KleroSurvey
    project-slug="myproject"
    survey-ulid="01ABC123..."
    @complete="handleComplete"
    @close="handleClose"
    @error="handleError"
  />
</template>

Programmatic Control

KleroEmbed

<script setup>
import { ref } from 'vue';
import { KleroEmbed } from '@kleroai/vue';

const embedRef = ref();

function reload() {
  embedRef.value?.reload();
}
</script>

<template>
  <button @click="reload">Reload</button>
  <KleroEmbed
    ref="embedRef"
    project-slug="myproject"
    embed-type="feedback"
  />
</template>

KleroSurvey

<script setup>
import { ref } from 'vue';
import { KleroSurvey } from '@kleroai/vue';

const surveyRef = ref();
</script>

<template>
  <button @click="surveyRef?.open()">Open Survey</button>
  <button @click="surveyRef?.close()">Close Survey</button>
  <KleroSurvey
    ref="surveyRef"
    project-slug="myproject"
    survey-ulid="01ABC123..."
  />
</template>

Widget Events

Listen for widget open/close events:

<template>
  <KleroWidget
    project-slug="myproject"
    @widget-opened="console.log('Widget opened')"
    @widget-closed="console.log('Widget closed')"
  />
</template>

Authentication

Pass a customer token to identify logged-in users:

<template>
  <KleroFeedback
    project-slug="myproject"
    customer-token="your-jwt-token"
  />
</template>

See the Authentication Guide for token generation.

Custom Base URL

For self-hosted or custom domain setups:

<template>
  <KleroFeedback
    project-slug="myproject"
    base-url="https://feedback.mycompany.com"
  />
</template>

Additional Embed Config

Pass extra configuration to the embed:

<template>
  <KleroEmbed
    project-slug="myproject"
    embed-type="survey"
    :embed-config="{ surveyUlid: '01ABC123...' }"
  />
</template>

Event Hook

For granular event handling across multiple components, use the useKleroEvents composable:

<script setup>
import { onMounted, onUnmounted } from 'vue';
import { useKleroEvents } from '@kleroai/vue';

const { on } = useKleroEvents();

let unsubscribe;

onMounted(() => {
  unsubscribe = on('survey:completed', (data) => {
    console.log('Survey completed:', data.responseUlid);
  });
});

onUnmounted(() => {
  unsubscribe?.();
});
</script>

API Reference

KleroEmbed Props

Prop	Type	Required	Description
project-slug	string	Yes	Your Klero project slug
embed-type	KleroEmbedType	Yes	Module type (feedback, roadmap, changelog, widget, survey)
base-url	string	No	Custom base URL
customer-token	string	No	JWT token for user identification
embed-config	Record<string, unknown>	No	Additional config passed to the embed

KleroEmbed Events

Event	Payload	Description
widget-opened	—	Widget panel opened
widget-closed	—	Widget panel closed
load	—	Embed finished loading

KleroEmbed Exposed Methods

Method	Description
reload()	Reload the embed

KleroSurvey Props

Prop	Type	Required	Description
project-slug	string	Yes	Your Klero project slug
survey-ulid	string	Yes	The survey's unique identifier
base-url	string	No	Custom base URL
customer-token	string	No	JWT token for user identification

KleroSurvey Events

Event	Payload	Description
complete	SurveyCompletedEvent	Survey completed
close	SurveyClosedEvent	Survey closed
error	string	Survey failed to load
load	—	Embed finished loading

KleroSurvey Exposed Methods

Method	Description
open(surveyUlid?)	Open the survey
close()	Close the survey

Convenience Components

Component	Equivalent
KleroFeedback	<KleroEmbed embed-type="feedback" />
KleroRoadmap	<KleroEmbed embed-type="roadmap" />
KleroChangelog	<KleroEmbed embed-type="changelog" />
KleroWidget	<KleroEmbed embed-type="widget" />