Skip to main content
Version: Vue SDK

Vue SDK

npm versionLicense: MITminzipped sizedownloads

CI environments

Deactivate the Screeb SDK during CI execution to avoid creating anonymous users and exceeding your MTU limit.

Prerequisites​

  • Node.js 14 or later
  • Vue 3.0 or later

Add Screeb as a dependency​

npm install @screeb/sdk-vue --save
# or
yarn add @screeb/sdk-vue

Setup — install the plugin in 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-ID>",
    userProperties: {
      firstname: "<user-firstname>",
      plan: "<user-plan>",
      last_seen_at: new Date(),
      authenticated: true,
    },
  })
  .mount("#app");
tip

You can find your channel id in your workspace settings.

Avoid anonymous users

If your user is already authenticated when the app loads, pass userId directly in the plugin config. This prevents Screeb from creating an anonymous visitor before identifying them.

Use the useScreeb composable​

Access all Screeb methods via useScreeb() in any component:

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

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

<template>
  <button @click="() => eventTrack('button-clicked')">
    Track event
  </button>
</template>

SDK lifecycle​

const { close } = useScreeb();

// Disable the Screeb SDK
await close();

Manual init (without autoInit)​

If you need to delay initialization — for example, until the user logs in:

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

const { init } = useScreeb();

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

CI environments​

Prevent Screeb from loading in test or CI environments:

createApp(App)
  .use(ScreebPlugin, {
    websiteId: "<YOUR-CHANNEL-ID>",
    shouldLoad: import.meta.env.PROD,
    autoInit: true,
  })
  .mount("#app");

Example app​

See the example-vue for a complete working integration.