# Vue

URL: https://pieowl.com/docs/sdks/vue







<Callout>
  Looking for a step-by-step tutorial? Read the [Vue analytics guide](/guides/vue-analytics).
</Callout>

Good to know [#good-to-know]

All tracking on this page happens in the browser.

For Vue single-page apps, use `@pieowl/web` directly. You don't need a separate Vue SDK: create one `Pieowl` instance and import it where you need it. For Nuxt, see [Nuxt](/docs/sdks/nuxt).

Installation [#installation]

<Steps>
  Step 1: Install [#step-1-install]

  ```bash
  npm install @pieowl/web
  ```

  Step 2: Initialize [#step-2-initialize]

  Create a shared Pieowl instance in your project:

  ```ts title="src/pieowl.ts"
  import { Pieowl } from '@pieowl/web';

  export const pieowl = new Pieowl({
    clientId: 'YOUR_CLIENT_ID',
  });
  ```

  `clientId` is enough. What the SDK collects by itself (page views, outside link clicks, `data-track` clicks) is set in **Settings → Site → What Pieowl counts**, not in code.

  Options [#options]

  <CommonSdkConfig />

  <WebSdkConfig />

  Step 3: Usage [#step-3-usage]

  Import the instance in your Vue components:

  ```vue
  <script setup>
  import { pieowl } from '@/pieowl';

  function handleClick() {
    pieowl.track('button_click', { button: 'signup' });
  }
  </script>

  <template>
    <button @click="handleClick">Trigger event</button>
  </template>
  ```
</Steps>

Usage [#usage]

Tracking events [#tracking-events]

Call `pieowl.track()` directly, or add `data-track` attributes to your buttons and links. `data-track` needs **Clicks you marked in your code** to be on in Settings → Site (it is by default).

```vue
<script setup>
import { pieowl } from '@/pieowl';

pieowl.track('my_event', { foo: 'bar' });
</script>
```

Identifying users [#identifying-users]

To identify a user, call `pieowl.identify()` with a unique ID.

<PersonalDataWarning />

```vue
<script setup>
import { pieowl } from '@/pieowl';

pieowl.identify({
  profileId: '123', // Required
  firstName: 'Joe',
  lastName: 'Doe',
  email: 'joe@doe.com',
  properties: {
    tier: 'premium',
  },
});
</script>
```

Setting global properties [#setting-global-properties]

To set properties that are sent with every event:

```vue
<script setup>
import { pieowl } from '@/pieowl';

pieowl.setGlobalProperties({
  app_version: '1.0.2',
  environment: 'production',
});
</script>
```

Incrementing properties [#incrementing-properties]

To increase a numeric property on a user profile.

* `value` is the amount to add. If you leave it out, the property goes up by 1.

```vue
<script setup>
import { pieowl } from '@/pieowl';

pieowl.increment({
  profileId: '1',
  property: 'visits',
  value: 1, // optional
});
</script>
```

Decrementing properties [#decrementing-properties]

To decrease a numeric property on a user profile.

* `value` is the amount to subtract. If you leave it out, the property goes down by 1.

```vue
<script setup>
import { pieowl } from '@/pieowl';

pieowl.decrement({
  profileId: '1',
  property: 'visits',
  value: 1, // optional
});
</script>
```

Clearing user data [#clearing-user-data]

To clear the current user's data:

```vue
<script setup>
import { pieowl } from '@/pieowl';

pieowl.clear();
</script>
```

Revenue tracking [#revenue-tracking]

Call `purchase()` with your order number and the amount in normal units, like `49.99`. `currency` is optional and defaults to your site currency. The same order sent twice counts once. Purchases and refunds from the browser only work after you turn on **Accept revenue sent from the browser** in Settings → Site → Revenue. Each purchase is credited to the current visit. See [Revenue attribution](/docs/revenue-attribution).

```vue
<script setup>
import { pieowl } from '@/pieowl';

// Track a purchase right away
await pieowl.purchase({ id: 'A-1001', amount: 29.99, currency: 'EUR' });

// Refund it later: the whole order, or pass amount for part of it
await pieowl.refund({ id: 'A-1001' });
</script>
```

Optional: create a composable [#optional-create-a-composable]

If you prefer a composable, write a small wrapper:

```ts title="src/composables/usePieowl.ts"
import { pieowl } from '@/pieowl';

export function usePieowl() {
  return pieowl;
}
```

Then use it in your components:

```vue
<script setup>
import { usePieowl } from '@/composables/usePieowl';

const pieowl = usePieowl();
pieowl.track('my_event', { foo: 'bar' });
</script>
```