Vue.js

Install EventDash in your Vue.js application.

Add the Script Tag

Add the EventDash script to your HTML file (typically public/index.html)

html

<!-- public/index.html -->
<!DOCTYPE html>
<html lang="en">
  <head>
    <script
      defer
      data-api-key="YOUR_API_KEY"
      src="https://www.eventda.sh/tracker.js"
    ></script>
  </head>
  <body>
    <div id="app"></div>
  </body>
</html>

Automatic Page Views

EventDash automatically tracks the initial page view and SPA route changes. No extra code is required.

javascript

// No additional code required
// Page views are tracked automatically on load and navigation.

Track a goal

Prefer trackGoal (or data-ed-goal). track() is a custom event, not a conversion.

vue

<!-- MyComponent.vue -->
<template>
  <button @click="handleClick">Sign Up</button>
</template>

<script setup>
const handleClick = () => {
  if (typeof window !== 'undefined' && window.eventDash) {
    window.eventDash.trackGoal('signup_clicked', {
      buttonId: 'signup-button',
      page: 'homepage'
    })
  }
}
</script>

Using HTML Attributes

You can also track events using HTML data attributes in your Vue templates

vue

<template>
  <button data-ed-goal="signup_clicked">
    Sign Up
  </button>
</template>