ReachBell for Vue

Install

One package. For Nuxt, add @reachbell/nuxt instead.

npm install @reachbell/vue
# or
pnpm add @reachbell/vue

Quick start

Install the plugin once, then call useReachBell() from any component.

// src/main.ts
import { createApp } from 'vue';
import { ReachBellPlugin } from '@reachbell/vue';
import App from './App.vue';

const app = createApp(App);

app.use(ReachBellPlugin, {
  projectId: import.meta.env.VITE_REACHBELL_PROJECT_ID,
  promptDelay: 8000,
  utm: { source: 'app', medium: 'webpush' },
});

app.mount('#app');

// src/components/SubscribeBell.vue
<script setup lang="ts">
import { useReachBell } from '@reachbell/vue';

const { status, subscribe, identify, track } = useReachBell();

async function enable() {
  await subscribe();
  identify({ email: 'jane@acme.com', plan: 'pro' });
  track('clicked_bell', { placement: 'header' });
}
</script>

<template>
  <span v-if="status === 'subscribed'">You're in. We'll ping you.</span>
  <button v-else @click="enable">Enable updates</button>
</template>

What you get

Composable + widgets + Nuxt module. Segments, A/B tests, and automations all wired up from the same SDK call.