Skip to content

Commit aaa50ac

Browse files
mormubismormubis
committed
✨ add vue-router-app sample application
1 parent a461ef8 commit aaa50ac

18 files changed

Lines changed: 1734 additions & 1 deletion

‎LICENSE-3rdparty.csv‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -27,6 +27,7 @@ dev,@types/react,MIT,Copyright Microsoft Corporation
2727
dev,@types/react-dom,MIT,Copyright Microsoft Corporation
2828
dev,@wxt-dev/module-react,MIT,Copyright (c) 2023 Aaron
2929
dev,@vitejs/plugin-react,MIT,Copyright (c) 2019-present Evan You & Vite Contributors
30+
dev,@vitejs/plugin-vue,MIT,Copyright (c) 2019-present, Yuxi (Evan) You and Vite contributors
3031
dev,@module-federation/enhanced,MIT, Copyright (c) 2020 ScriptedAlchemy LLC (Zack Jackson) Zhou Shaw (zhouxiao)
3132
dev,@vue/test-utils,MIT,Copyright (c) 2021-present vuejs
3233
dev,ajv,MIT,Copyright 2015-2017 Evgeny Poberezkin

‎eslint.config.mjs‎

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -32,6 +32,7 @@ export default tseslint.config(
3232
'test/apps/react-shopist-like',
3333
'test/apps/microfrontend',
3434
'test/apps/nextjs',
35+
'test/apps/vue-router-app',
3536
'sandbox',
3637
'coverage',
3738
'rum-events-format',

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

Lines changed: 1 addition & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -26,6 +26,7 @@ const APPS: AppConfig[] = [
2626
{ name: 'react-shopist-like' },
2727
{ name: 'microfrontend' },
2828
{ name: 'nextjs' },
29+
{ name: 'vue-router-app' },
2930

3031
// React Router apps
3132
{ name: 'react-router-v6-app' },

‎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: 5 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,5 @@
1+
<template>
2+
<div>
3+
<h1>Component Tracker</h1>
4+
</div>
5+
</template>

0 commit comments

Comments
 (0)