Vue / Angular SDK

Integrate @growise/web-sdk in Vue 3 or Angular. Same browser SDK as JavaScript — framework wiring only on this page. For core API (track, identify, push), see JavaScript / Web SDK.

Overview

Install @growise/web-sdk once, call init at app bootstrap, then use track / onUserLogin / logout from components or services.

Package: @growise/web-sdk
Full API reference → JavaScript / Web SDK
React / Next.js → React SDK

Install

npmbash

npm install @growise/web-sdk

Vue 3

plugins/growise.tstypescript

import type { App } from 'vue'
import growise from '@growise/web-sdk'

export default {
  install(app: App) {
    growise.init('YOUR_PROJECT_API_KEY', { env: 'prod' })
    app.config.globalProperties.$growise = growise
    app.provide('growise', growise)
  },
}

main.tstypescript

import { createApp } from 'vue'
import App from './App.vue'
import growisePlugin from './plugins/growise'

createApp(App).use(growisePlugin).mount('#app')

Componentvue

<script setup lang="ts">
import { inject } from 'vue'
import type { GrowiseSDK } from '@growise/web-sdk'

const growise = inject<GrowiseSDK>('growise')!

function addToCart() {
  growise.track('Add to Cart', { item: 'Headphones', price: 199.99 })
}

function onLogin(user: { id: string; email: string; name: string }) {
  growise.onUserLogin({
    Site: {
      Identity: user.id,
      Email: user.email,
      Name: user.name,
    },
  })
}
</script>

Angular

GrowiseServicetypescript

import { Injectable } from '@angular/core'
import growise, { GrowiseSDK } from '@growise/web-sdk'

@Injectable({ providedIn: 'root' })
export class GrowiseService {
  private sdk: GrowiseSDK = growise

  constructor() {
    this.sdk.init('YOUR_PROJECT_API_KEY', { env: 'prod' })
  }

  login(id: string, email: string, name: string) {
    this.sdk.onUserLogin({
      Site: { Identity: id, Email: email, Name: name },
    })
  }

  track(event: string, properties?: Record<string, unknown>) {
    this.sdk.track(event, properties)
  }

  logout() {
    return this.sdk.logout()
  }
}

SPA route changes

The SDK fires $pageview on full loads. For client-side navigations, optionally track yourself.

Optional pageviewtypescript

growise.track('$pageview', {
  path: window.location.pathname,
  title: document.title,
})

Next steps

JavaScript / Web SDK — identity model, environments, push, troubleshooting
Identify Users & Track Events guides for naming conventions