@screeb/sdk-vue

Screeb SDK for Vue 3 — wraps @screeb/sdk-browser with a Plugin + useScreeb composable.

Install

npm install @screeb/sdk-vue --save

Setup

// 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>',
  })
  .mount('#app')

Custom domains (AdBlocker bypass)

If you route Screeb traffic through your own domain (reverse proxy) to bypass AdBlockers, pass the endpoints (and optionally screebEndpoint for the loader URL) through the plugin's options. Only the endpoints you provide are overridden; the rest fall back to Screeb's defaults.

createApp(App)
  .use(ScreebPlugin, {
    websiteId: '<YOUR-CHANNEL-ID>',
    autoInit: true,
    options: {
      screebEndpoint: 'https://analytics.acme.com/sdk/tag.js',
      endpoints: {
        rpc:        'https://analytics.acme.com/rpc',
        static:     'https://analytics.acme.com/static',
        report:     'https://analytics.acme.com/report',
        hostedPage: 'https://analytics.acme.com/hosted-page',
        centipede:  'wss://analytics.acme.com/centipede',
      },
    },
  })
  .mount('#app')

All endpoints must use https:// (or wss:// for centipede) and the domains must be allow-listed in Screeb Admin → Settings → Custom Domains. See the Custom Collector URL guide.

Use in components

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

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

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

Documentation

https://developers.screeb.app/sdk-vue/install