Comment on page
Vue

LogSnag client for Vue applications
Installation
Using npm
npm install @logsnag/vue
Using yarn
yarn add @logsnag/vue
Using pnpm
pnpm add @logsnag/vue
Usage
First, install the LogSnag plugin in your Vue application:
Set your token's scope to public in the LogSnag dashboard.
import { createApp } from 'vue';
import LogSnag from '@logsnag/vue';
​
const app = createApp(App);
​
app.use(LogSnag, {
  token: '<TOKEN>',
  project: '<PROJECT_NAME>'
});
​
app.mount('#app');
Then, import the functions you need from the package:
import { setUserId, track, identify } from "@logsnag/vue";
​
// Set the user id for the current user
setUserId('user-123');
​
// Track an event
track({
  channel: "payments",
  event: "New Subscription",
  user_id: "user-123",
  icon: "💰",
  notify: true,
  tags: {
    plan: "premium",
    cycle: "monthly",
    trial: false
  }
});
​
// Identify a user
identify({
  user_id: "user-123",
  properties: {
    name: "John Doe",
    email: "[email protected]",
    plan: "premium",
  }
});
You can also track events directly from HTML elements using data attributes:
<button
    data-event="Upgraded Plan" 
    data-channel="billing"
    data-icon=":moneybag:"
    data-tag-plan="Pro"
    data-tag-period="Monthly"
    data-tag-price="9.99"
>
    Upgrade to Pro
</button>
In this example, when the button is clicked, an event named "Upgraded Plan" will be tracked with the specified tags.
Hooks
track(options: TrackOptions): Track custom events.
identify(options: IdentifyOptions): Identify user traits.
setUserId(userId: string | null): Set the user id for the current user. If the user is not logged in, pass null.
clearUserId(): Clear the user id for the current user.
setDebug(flag: boolean = true): Set debug mode for logging.
SDKs - Previous
Next - SDKs
Deno
Last modified 2mo ago