wideangle/wideangle-vuejs
3
Fork 0
Code Issues Pull requests Projects Releases Packages Wiki Activity Actions

Wide Angle plugin with working sample

Browse source
This commit is contained in:
Jarek Rozanski 2023-03-10 21:02:26 +00:00
parent 8e400e1b62
commit 627d04c1a7
18 changed files with 1524 additions and 9 deletions
Download patch file Download diff file Expand all files Collapse all files

3
sample/vue-sample/.vscode/extensions.json vendored Normal file
View file

@ -0,0 +1,3 @@
{
"recommendations": ["Vue.volar", "Vue.vscode-typescript-vue-plugin"]
}

29
sample/vue-sample/README.md Normal file
View file

@ -0,0 +1,29 @@
# vue-sample
This template should help get you started developing with Vue 3 in Vite.
## Recommended IDE Setup
[VSCode](https://code.visualstudio.com/) + [Volar](https://marketplace.visualstudio.com/items?itemName=Vue.volar) (and disable Vetur) + [TypeScript Vue Plugin (Volar)](https://marketplace.visualstudio.com/items?itemName=Vue.vscode-typescript-vue-plugin).
## Customize configuration
See [Vite Configuration Reference](https://vitejs.dev/config/).
## Project Setup
```sh
npm install
```
### Compile and Hot-Reload for Development
```sh
npm run dev
```
### Compile and Minify for Production
```sh
npm run build
```

13
sample/vue-sample/index.html Normal file
View file

@ -0,0 +1,13 @@
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<link rel="icon" href="/favicon.ico">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>Vite App</title>
</head>
<body>
<div id="app"></div>
<script type="module" src="/src/main.js"></script>
</body>
</html>

1183
sample/vue-sample/package-lock.json generated Normal file
View file

File diff suppressed because it is too large Load diff

19
sample/vue-sample/package.json Normal file
View file

@ -0,0 +1,19 @@
{
"name": "vue-sample",
"version": "0.0.0",
"private": true,
"scripts": {
"dev": "vite",
"build": "vite build",
"preview": "vite preview"
},
"dependencies": {
"vue": "^3.2.47",
"vue-router": "^4.1.6",
"wideangle-vue": "file:../../"
},
"devDependencies": {
"@vitejs/plugin-vue": "^4.0.0",
"vite": "^4.1.4"
}
}

BIN
sample/vue-sample/public/favicon.ico Normal file
View file

Binary file not shown.
Side by side

After

Width:  |  Height:  |  Size: 4.2 KiB

32
sample/vue-sample/src/App.vue Normal file
View file

@ -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>

3
sample/vue-sample/src/assets/main.css Normal file
View file

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

17
sample/vue-sample/src/main.js Normal file
View file

@ -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')

20
sample/vue-sample/src/router/index.js Normal file
View file

@ -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

6
sample/vue-sample/src/views/HomeView.vue Normal file
View file

@ -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>

34
sample/vue-sample/src/views/SampleView.vue Normal file
View file

@ -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>

13
sample/vue-sample/vite.config.js Normal file
View file

@ -0,0 +1,13 @@
import { fileURLToPath, URL } from 'node:url'
import { defineConfig } from 'vite'
import vue from '@vitejs/plugin-vue'
export default defineConfig({
plugins: [vue()],
resolve: {
alias: {
'@': fileURLToPath(new URL('./src', import.meta.url))
}
}
})