Vue

npm install @dwellcount/vue

import { createApp } from 'vue';
import { DwellcountPlugin } from '@dwellcount/vue';
import App from './App.vue';

const app = createApp(App);

app.use(DwellcountPlugin, {
  siteId: 'YOUR_SITE_ID',
  version: '1.0.0',
  // endpoint: 'https://your-server.com/api/ingest' // Self-hosted
});

app.mount('#app');

<script setup>
import { useTracker } from '@dwellcount/vue';

const { track, identify, setBackendVersion } = useTracker();

const handleSubmit = async () => {
  // Track form submission
  track('form_submitted', {
    formId: 'contact',
    fields: 3,
  });
};

const fetchData = async () => {
  const response = await fetch('/api/data');

  // Capture backend version from headers
  const version = response.headers.get('X-App-Version');
  if (version) {
    setBackendVersion({ version });
  }

  return response.json();
};
</script>

<template>
  <form @submit.prevent="handleSubmit">
    <!-- form fields -->
    <button type="submit">Submit</button>
  </form>
</template>

<template>
  <!-- Track click event -->
  <button v-track:click="{ event: 'cta_clicked', props: { location: 'hero' } }">
    Get Started
  </button>

  <!-- Track hover event -->
  <div v-track:mouseenter="{ event: 'product_hovered', props: { productId: 123 } }">
    Product Card
  </div>

  <!-- Track form submission -->
  <form v-track:submit="{ event: 'newsletter_signup' }">
    <input type="email" placeholder="Email" />
    <button type="submit">Subscribe</button>
  </form>
</template>