@intunix/vue

Official Vue 3 binding for Intunix, the AI-native experience management platform — in-app surveys, NPS, CSAT, and feedback forms with triggers, targeting, and analytics. Feature-equivalent to @intunix/react.

Install

npm install @intunix/vue @intunix/core vue

Usage

Wrap your app once. <IntunixProvider> creates the client and mounts the experience host.

<!-- App.vue -->
<script setup lang="ts">
import { IntunixProvider } from '@intunix/vue';
</script>

<template>
  <!-- Register globally (optional) — these go live as soon as the SDK loads. -->
  <IntunixProvider api-key="pk_live_xxx" :config="{ register: ['welcome'] }">
    <!-- your app -->
  </IntunixProvider>
</template>

A form shows in one of two ways. Register it to auto-show when its trigger (URL, event, time…) matches — useRegisterForm registers on mount and unregisters on unmount, so it only fires on the right screen:

<!-- PricingPage.vue -->
<script setup lang="ts">
import { useRegisterForm } from '@intunix/vue';

useRegisterForm('pricing_survey');   // opens automatically when its trigger matches
</script>

Or open one manually from a click:

<!-- Checkout.vue -->
<script setup lang="ts">
import { useTrack, useExperience } from '@intunix/vue';

const track = useTrack();
const nps = useExperience('nps_q4');
</script>

<template>
  <button @click="track('checkout_done'); nps.show()">Pay</button>
</template>

Only one form is on screen at a time — if several match at once they queue and show in sequence. URL-triggered forms wait urlTriggerDelayMs (default 600).

config.register (string[] | 'all') also controls what the SDK fetches at all, not just which triggers go live — and a form only reaches the SDK when the console's "Available in Web SDK" toggle and register both agree. Full table and details in @intunix/core's README.

Plugin alternative

import { createIntunix, ExperienceHost } from '@intunix/vue';

app.use(createIntunix({ apiKey: 'pk_live_xxx' }));
// then render <ExperienceHost :renderer="..." /> once near the root,
// or just use <IntunixProvider>, which mounts the host for you.

Inline forms

Render a feedback form in normal document flow (hosted pages, builder previews):

<script setup lang="ts">
import { FeedbackForm } from '@intunix/vue';
</script>

<template>
  <FeedbackForm :content="formContent" :on-complete="(r) => console.log(r)" />
</template>

Context

Attach dynamic context (course id, screen, plan tier…) to targeting, responses, and cooldown scoping — set once, session-scoped, or per call:

<script setup lang="ts">
import { useSetContext, useExperience } from '@intunix/vue';

const setContext = useSetContext();
setContext({ courseId: 'c-101' });   // sticky — stays attached until cleared/new session
setContext(null);                    // clear it

const nps = useExperience('nps_course');
nps.show({ context: { courseId: 'c-102' } });   // per-call — wins over sticky context
</script>

<FeedbackForm> takes the same idea as a prop — the context rides along on the on-complete result, it isn't submitted separately:

<template>
  <FeedbackForm
    :content="formContent"
    :context="{ courseId: 'c-102' }"
    :on-complete="(r) => console.log(r.context)"
  />
</template>

The catalog fields that drive targeting/eligibility/cadence for these forms (autoActivate, targeting, eligibility, cadence, frequencyScope, capabilities.batchShown) are set in the Intunix console, not in code — see the full reference in @intunix/core's README.

API

• <IntunixProvider api-key config? components? render-experience?> — setup + host.
• createIntunix({ apiKey, config? }) — plugin form (app.use(...)).
• useIntunix() — the IntunixClient.
• useTrack() / useIdentify() — event + identity helpers.
• useReset() — returns a reset() to call on logout: forgets the user, rotates the anon id, ends the session, clears context. identify() already keeps one user's cooldowns off another's; reset() buys a clean session boundary and an honest anonymous_id on responses. See @intunix/core.
• useSetContext() — set/clear the sticky, session-scoped context bag.
• useRegisterForm(idOrSlug) — register on mount / unregister on unmount.
• useExperience(idOrSlug) — { show(opts?: { context }) } to open a form by id or slug.
• useActiveExperiences() — reactive list of currently-shown experiences.
• <FeedbackForm context?>, <ExperienceHost>, and step/Header/Footer/Thanks overrides.

A runnable CX builder demo lives in the repo at examples/vue.

License

Proprietary © Intunix.