Vue - Zenstep

Installation

Add the snippet to your index.html:

index.html

<!DOCTYPE html>
<html>
  <head>
    ...
  </head>
  <body>
    <div id="app"></div>
    <script
      async
      src="https://cdn.getzenstep.com/v1/snippet.js"
      data-zenstep="YOUR_SNIPPET_KEY"
    ></script>
  </body>
</html>

Calling identify — Composition API

Create a composable that calls identify() when the user is available:

composables/useZenstep.ts

import { watch } from "vue";
import { useAuth } from "./useAuth"; // replace with your auth composable

export function useZenstep() {
  const { user } = useAuth();

  watch(
    () => user.value?.id,
    (userId) => {
      if (!userId) return;
      window.zenstep?.identify(userId, {
        email: user.value?.email,
        plan: user.value?.plan,
        role: user.value?.role,
      });
    },
    { immediate: true },
  );
}

Use it in your root App.vue:

App.vue

<script setup lang="ts">
import { useZenstep } from "./composables/useZenstep";

useZenstep();
</script>

<template>
  <RouterView />
</template>

Calling identify — Options API

App.vue

<script>
export default {
  name: "App",
  computed: {
    currentUser() {
      return this.$store.getters.currentUser; // adjust for your state management
    },
  },
  watch: {
    "currentUser.id": {
      immediate: true,
      handler(userId) {
        if (!userId) return;
        window.zenstep?.identify(userId, {
          email: this.currentUser.email,
          plan: this.currentUser.plan,
        });
      },
    },
  },
};
</script>

Nuxt 3

In Nuxt 3, use a plugin to load the snippet and a composable for identify. Add the script via useHead in a plugin:

plugins/zenstep.client.ts

export default defineNuxtPlugin(() => {
  useHead({
    script: [
      {
        src: "https://cdn.getzenstep.com/v1/snippet.js",
        "data-zenstep": useRuntimeConfig().public.zenstepKey,
        async: true,
        tagPosition: "bodyClose",
      },
    ],
  });
});

Add to nuxt.config.ts:

nuxt.config.ts

export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      zenstepKey: process.env.ZENSTEP_KEY,
    },
  },
});

For identify, call it inside a useAuth watcher in your app’s authenticated layout.

TypeScript types

types/global.d.ts

interface ZenstepAPI {
  identify: (
    userId: string,
    attributes?: Record<string, string | number | boolean>,
  ) => void;
  track: (event: string, data?: Record<string, unknown>) => void;
}

declare global {
  interface Window {
    zenstep?: ZenstepAPI;
  }
}

export {};

Vue Router navigation is automatically detected by Zenstep. When the route changes, flows are re-evaluated against the new URL. No additional setup required.

​Installation

​Calling identify — Composition API

​Calling identify — Options API

​Nuxt 3

​TypeScript types

​SPA navigation

Installation

Calling identify — Composition API

Calling identify — Options API

Nuxt 3

TypeScript types

SPA navigation