Wide Angle plugin with working sample

sample/vue-sample/src/App.vue

@@ -0,0 +1,32 @@
+<script setup>
+import { RouterLink, RouterView } from 'vue-router'
+</script>
+
+<template>
+  <div class="container">
+    <header>
+      <div class="wrapper">
+        <nav>
+          <RouterLink to="/">Home</RouterLink>
+          <RouterLink to="/sample">Sample</RouterLink>
+        </nav>
+      </div>
+    </header>
+
+    <RouterView />
+  </div>
+</template>
+
+
+<style scoped>
+nav {
+  display: flex;
+  flex-direction: row;
+  gap: 1rem;
+}
+.container {
+  display: flex;
+  flex-direction: column;
+  gap: 2rem;
+}
+</style>

sample/vue-sample/src/assets/main.css

@@ -0,0 +1,3 @@
+body {
+  font-size: 1.5rem;
+}

sample/vue-sample/src/main.js

@@ -0,0 +1,17 @@
+import { createApp } from 'vue'
+import App from './App.vue'
+import router from './router'
+import WideAngle from 'wideangle-vue'
+
+import './assets/main.css'
+
+const app = createApp(App)
+
+app.use(router)
+app.use(WideAngle, {
+  siteId: "8D27G3B9ACA01F4241",
+  domain: "wideangle.local:3000",
+  fingerprint: true,
+  supressDnt: true
+})
+app.mount('#app')

sample/vue-sample/src/router/index.js

@@ -0,0 +1,20 @@
+import { createRouter, createWebHistory } from 'vue-router'
+import HomeView from '../views/HomeView.vue'
+
+const router = createRouter({
+  history: createWebHistory(import.meta.env.BASE_URL),
+  routes: [
+    {
+      path: '/',
+      name: 'home',
+      component: HomeView
+    },
+    {
+      path: '/sample',
+      name: 'sample',
+      component: () => import('../views/SampleView.vue')
+    }
+  ]
+})
+
+export default router

sample/vue-sample/src/views/HomeView.vue

@@ -0,0 +1,6 @@
+<template>
+  <main>
+    <h1>Welcome screen</h1>
+    <p>Go to <RouterLink to="/sample">SAMPLE</RouterLink> for Custom Action demostration</p>
+  </main>
+</template>

sample/vue-sample/src/views/SampleView.vue

@@ -0,0 +1,34 @@
+<template>
+  <main>
+    <p>I am sample</p>
+    <button @click="sendEvent()">Send Event</button>
+    {{  status }}
+  </main>
+</template>
+
+<script setup>
+import { inject, ref } from 'vue'
+const waa = inject('waa');
+const status = ref('idle');
+
+const sendEvent = async () => {
+  const params = {
+    session: 'cjhw92nf9aq',
+    cohort: 'c1233'
+  }
+  console.log(`Sending event: ${JSON.stringify(params)}`);
+  status.value = 'pending...'
+  await waa.dispatchEvent('interest', params);
+  status.value = 'sent'
+}
+</script>
+
+
+<style scoped>
+main {
+  display: flex;
+  flex-direction: column;
+  gap: 1rem;
+  max-width: 300px;
+}
+</style>