Docs

VUE

Suggest Edits

This library lets you start collecting data from your web app. It also helps you control which data you collect – like screen views, custom events, goals and more. The library contains modules with methods.

Installation

To install JS library for VUE, follow these steps:

  1. In your project folder, run the following command:
npm install @piwikpro/vue-piwik-pro
  1. Add the VuePiwikPro module to the highest level application module. Call the VuePiwikPro.initialize() method by passing your account address (Example: https://example.piwik.pro/) and the site ID (Where to find it?). The VuePiwikPro.initialize() method must be called before any other tracking functions can record data.
// main.ts
import VuePiwikPro from '@piwikpro/vue-piwik-pro'

VuePiwikPro.initialize(
  import.meta.env.VITE_PIWIK_PRO_CONTAINER_ID as string,
  import.meta.env.VITE_PIWIK_PRO_CONTAINER_URL as string
)

Setup with a nonce

The nonce attribute allows you to allow-list specific elements, such as an inline script or style. It helps you avoid using the CSP unsafe-inline directive, which would allow all inline scripts or styles.

To pass a nonce to a script, include it as the third argument when calling the script initialization method.

// main.ts
import VuePiwikPro from '@piwikpro/vue-piwik-pro'

VuePiwikPro.initialize(
  import.meta.env.VITE_PIWIK_PRO_CONTAINER_ID as string,
  import.meta.env.VITE_PIWIK_PRO_CONTAINER_URL as string,
  { nonce: 'nonce-string' }
)

Basic usage

import { PageViews, GoalConversions } from '@piwikpro/vue-piwik-pro'

PageViews.trackPageView()

GoalConversions.trackGoal(1, 100)

Examples of usage

Explore the ./vue-piwik-pro-example directory to see how to use this package with specific examples and its various methods.

Methods

Here’s a list of all JS methods you can use in your VUE project. Descriptions and other information are available after clicking on links.

A

C

D

E

G

H

I

L

R

S

T

Updated 8 days ago