Stats
Actions
Tags
From vue-instrumentation
Use this skill whenever the user wants to instrument a Vue.js app with Datadog RUM. Triggers on mentions of Datadog RUM for Vue, Vue browser monitoring, Vue session replay, Vue frontend observability, or Datadog Vue integration.
How this skill is triggered — by the user, by Claude, or both
Slash command
/vue-instrumentation:vue-dd-rumThe summary Claude sees in its skill listing — used to decide when to auto-load this skill
Instrument Vue.js applications with Datadog RUM SDK for session tracking, user monitoring, and session replay.
Instrument Vue.js applications with Datadog RUM SDK for session tracking, user monitoring, and session replay.
setup-vue has been completed successfullyhttp://localhost:5173npm install @datadog/browser-rum
In src/main.js, add RUM initialization before mounting the app:
import { createApp } from 'vue'
import { datadogRum } from '@datadog/browser-rum'
import './style.css'
import App from './App.vue'
// Initialize Datadog RUM
datadogRum.init({
applicationId: '<DD_APPLICATION_ID>',
clientToken: '<DD_CLIENT_TOKEN>',
site: 'datadoghq.com',
service: 'my-vue-app',
env: 'test',
version: '1.0.0',
sessionSampleRate: 100,
sessionReplaySampleRate: 100,
defaultPrivacyLevel: 'mask-user-input',
})
// Set user information for session identification
datadogRum.setUser({
id: 'user-12345',
name: 'John Doe',
email: '[email protected]',
})
createApp(App).mount('#app')
Open browser DevTools Network tab and look for requests to datadoghq.com. RUM events should be sent as the user interacts with the app.
Cause: Client token or application ID incorrect. Fix: Verify credentials at UX Monitoring > RUM Applications in Datadog UI.
Cause: sessionReplaySampleRate set to 0 or privacy level too restrictive.
Fix: Ensure sessionReplaySampleRate: 100 during development.
Cause: Ad blocker or network issue blocking Datadog endpoints. Fix: Disable ad blockers for localhost. Check browser console for blocked requests.
Cause: RUM initialized multiple times during Vite HMR.
Fix: Add a guard: if (!window.__DATADOG_RUM_INSTALLED__) { ... window.__DATADOG_RUM_INSTALLED__ = true }.
npx claudepluginhub jek-bao-choo/datadog-agentic-plugins --plugin vue-instrumentationSearches MemPalace before answering questions about past work, people, projects, or prior decisions. Returns verbatim stored content instead of guessing from model memory.
Guides Payload CMS config (payload.config.ts), collections, fields, hooks, access control, APIs. Debugs validation errors, security, relationships, queries, transactions, hook behavior.
Implements vector databases with Pinecone, Weaviate, Qdrant, Milvus, pgvector for semantic search, RAG, recommendations, and similarity systems. Optimizes embeddings, indexing, and hybrid search.