Skip to main content
Version: Vue SDK

Examples

Complete example app​

The example-vue repository contains a working Vue 3 + Vite app with the Screeb SDK integrated.

Install plugin with autoInit​

// main.ts
import { createApp } from "vue";
import { ScreebPlugin } from "@screeb/sdk-vue";
import App from "./App.vue";

createApp(App)
  .use(ScreebPlugin, {
    websiteId: "<YOUR-CHANNEL-ID>",
    autoInit: true,
    userId: "user-123",
    userProperties: {
      plan: "pro",
      authenticated: true,
    },
    hooks: {
      version: "1.0.0",
      onReady: () => console.log("Screeb ready"),
    },
  })
  .mount("#app");

Delay init until login​

// main.ts
createApp(App)
  .use(ScreebPlugin, {
    websiteId: "<YOUR-CHANNEL-ID>",
    autoInit: false,
  })
  .mount("#app");
<script setup lang="ts">
import { useScreeb } from "@screeb/sdk-vue";

const { init } = useScreeb();

async function onLogin(userId: string, email: string) {
  await init("<YOUR-CHANNEL-ID>", userId, { email });
}
</script>

Track events​

<script setup lang="ts">
import { useScreeb } from "@screeb/sdk-vue";

const { eventTrack } = useScreeb();
</script>

<template>
  <button @click="() => eventTrack('button-clicked', { page: 'home' })">
    Click me
  </button>
</template>

Trigger a survey on button click​

<script setup lang="ts">
import { useScreeb } from "@screeb/sdk-vue";

const { surveyStart } = useScreeb();
</script>

<template>
  <button @click="() => surveyStart('<survey-id>')">Give feedback</button>
</template>