# Vue

### Installation <a href="#installation" id="installation"></a>

#### Using npm <a href="#using-npm" id="using-npm"></a>

```bash
npm install @logsnag/vue
```

#### Using yarn <a href="#using-yarn" id="using-yarn"></a>

```bash
yarn add @logsnag/vue
```

#### Using pnpm <a href="#using-pnpm" id="using-pnpm"></a>

```bash
pnpm add @logsnag/vue
```

### Usage <a href="#usage" id="usage"></a>

First, install the LogSnag plugin in your Vue application:

> Set your token's scope to `public` in the LogSnag dashboard.

```typescript
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:

```typescript
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: "john@doe.com",
    plan: "premium",
  }
});
```

You can also track events directly from HTML elements using data attributes:

```html
<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 <a href="#hooks" id="hooks"></a>

* `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.