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();

Identify after login​

If your app boots before the user is authenticated, initialize Screeb with autoInit: true, then identify the user after login:

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

const { identity } = useScreeb();

async function onUserLogin(userId: string) {
  await identity(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.