Skip to content

Commit 7f3176f

Browse files
mormubismormubis
committed
✨ add vue-router-app sample application
1 parent 290c50e commit 7f3176f

17 files changed

Lines changed: 1744 additions & 5 deletions

File tree

‎eslint.config.mjs‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -30,8 +30,8 @@ export default tseslint.config(
3030
'test/**/.next',
3131
'test/apps/react-heavy-spa',
3232
'test/apps/react-shopist-like',
33-
'test/apps/microfrontend',
34-
'test/apps/nextjs',
33+
'test/apps/nextjs-app-router',
34+
'test/apps/vue-router-app',
3535
'sandbox',
3636
'coverage',
3737
'rum-events-format',

‎scripts/build/build-test-apps.ts‎

Lines changed: 2 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -18,10 +18,10 @@ runMain(async () => {
1818
buildApp('test/apps/react-router-v6-app')
1919
buildApp('test/apps/react-heavy-spa')
2020
buildApp('test/apps/react-shopist-like')
21-
buildApp('test/apps/microfrontend')
2221
await buildReactRouterv7App()
2322
await buildExtensions()
24-
buildApp('test/apps/nextjs')
23+
buildApp('test/apps/nextjs-app-router')
24+
buildApp('test/apps/vue-router-app')
2525

2626
printLog('Test apps and extensions built successfully.')
2727
})

‎test/apps/vue-router-app/index.html‎

Lines changed: 19 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,19 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<head>
4+
<meta charset="UTF-8" />
5+
<title>Vue RUM App</title>
6+
<script>
7+
window.RUM_CONFIGURATION = {
8+
applicationId: 'xxx',
9+
clientToken: 'xxx',
10+
site: 'datadoghq.com',
11+
trackUserInteractions: true,
12+
}
13+
</script>
14+
</head>
15+
<body>
16+
<div id="app"></div>
17+
<script type="module" src="/src/main.ts"></script>
18+
</body>
19+
</html>

‎test/apps/vue-router-app/package.json‎

Lines changed: 41 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,41 @@
1+
{
2+
"name": "vue-router-app",
3+
"private": true,
4+
"scripts": {
5+
"build": "vite build",
6+
"dev": "vite",
7+
"preview": "vite preview"
8+
},
9+
"dependencies": {
10+
"vue": "3.5.29",
11+
"vue-router": "4.6.4"
12+
},
13+
"peerDependencies": {
14+
"@datadog/browser-rum": "*",
15+
"@datadog/browser-rum-vue": "*"
16+
},
17+
"peerDependenciesMeta": {
18+
"@datadog/browser-rum": {
19+
"optional": true
20+
},
21+
"@datadog/browser-rum-vue": {
22+
"optional": true
23+
}
24+
},
25+
"resolutions": {
26+
"@datadog/browser-rum-core": "file:../../../packages/rum-core/package.tgz",
27+
"@datadog/browser-core": "file:../../../packages/core/package.tgz",
28+
"@datadog/browser-rum": "file:../../../packages/rum/package.tgz",
29+
"@datadog/browser-rum-vue": "file:../../../packages/rum-vue/package.tgz",
30+
"@datadog/browser-rum-slim": "file:../../../packages/rum-slim/package.tgz",
31+
"@datadog/browser-worker": "file:../../../packages/worker/package.tgz"
32+
},
33+
"devDependencies": {
34+
"@vitejs/plugin-vue": "5.x",
35+
"typescript": "5.x",
36+
"vite": "6.x"
37+
},
38+
"volta": {
39+
"extends": "../../../package.json"
40+
}
41+
}

‎test/apps/vue-router-app/src/App.vue‎

Lines changed: 8 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,8 @@
1+
<template>
2+
<nav>
3+
<router-link to="/">Home</router-link> | <router-link to="/user/42">User 42</router-link> |
4+
<router-link to="/tracked">Tracked</router-link> |
5+
<router-link to="/error">Error</router-link>
6+
</nav>
7+
<RouterView />
8+
</template>

‎test/apps/vue-router-app/src/main.ts‎

Lines changed: 40 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,40 @@
1+
import { createApp } from 'vue'
2+
import { createWebHistory } from 'vue-router'
3+
import { createRouter } from '@datadog/browser-rum-vue/vue-router-v4'
4+
import { datadogRum } from '@datadog/browser-rum'
5+
import { vuePlugin, addVueError } from '@datadog/browser-rum-vue'
6+
import App from './App.vue'
7+
8+
declare global {
9+
interface Window {
10+
RUM_CONFIGURATION?: any
11+
RUM_CONTEXT?: any
12+
}
13+
}
14+
15+
const router = createRouter({
16+
history: createWebHistory(),
17+
routes: [
18+
{ path: '/', component: () => import('./pages/HomePage.vue') },
19+
{ path: '/user/:id', component: () => import('./pages/UserPage.vue') },
20+
{ path: '/tracked', component: () => import('./pages/TrackedPage.vue') },
21+
{ path: '/error', component: () => import('./pages/ErrorPage.vue') },
22+
],
23+
})
24+
25+
const params = new URLSearchParams(window.location.search)
26+
const rumConfig = params.get('rum-config')
27+
const rumContext = params.get('rum-context')
28+
29+
const config = rumConfig ? JSON.parse(rumConfig) : window.RUM_CONFIGURATION
30+
const context = rumContext ? JSON.parse(rumContext) : window.RUM_CONTEXT
31+
32+
datadogRum.init({ ...config, plugins: [vuePlugin({ router: true })] })
33+
34+
if (context) {
35+
datadogRum.setGlobalContext(context)
36+
}
37+
38+
const app = createApp(App)
39+
app.config.errorHandler = addVueError
40+
app.use(router).mount('#app')

‎test/apps/vue-router-app/src/pages/ErrorPage.vue‎

Lines changed: 11 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,11 @@
1+
<script setup lang="ts">
2+
function triggerError() {
3+
throw new Error('Error triggered by button click')
4+
}
5+
</script>
6+
<template>
7+
<div>
8+
<h1>Error Page</h1>
9+
<button id="error-button" @click="triggerError">Trigger Error</button>
10+
</div>
11+
</template>

‎test/apps/vue-router-app/src/pages/HomePage.vue‎

Lines changed: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
<h1>Home</h1>
4+
</div>
5+
</template>

‎test/apps/vue-router-app/src/pages/TrackedPage.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup lang="ts">
2+
import { UNSTABLE_useVueComponentTracker } from '@datadog/browser-rum-vue'
3+
UNSTABLE_useVueComponentTracker('TrackedPage')
4+
</script>
5+
<template>
6+
<div>
7+
<h1>Component Tracker</h1>
8+
</div>
9+
</template>

‎test/apps/vue-router-app/src/pages/UserPage.vue‎

Lines changed: 9 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,9 @@
1+
<script setup lang="ts">
2+
import { useRoute } from 'vue-router'
3+
const route = useRoute()
4+
</script>
5+
<template>
6+
<div>
7+
<h1>User {{ route.params.id }}</h1>
8+
</div>
9+
</template>

0 commit comments

Comments
 (0)