Skip to main content

Documentation Index

Fetch the complete documentation index at: https://docs.getzenstep.com/llms.txt

Use this file to discover all available pages before exploring further.

​
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 {};

​
SPA navigation

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