@guideify/vue

@guideify/vue

Vue 3 plugin, composable and directive. Mirrors @guideify/react — the same three capabilities under Vue's three idioms.

npm i @guideify/vue

import { createApp } from 'vue';
import { createGuideify } from '@guideify/vue';

createApp(App)
  .use(createGuideify({ apiKey: import.meta.env.VITE_GUIDEIFY_KEY }))
  .mount('#app');

<script setup lang="ts">
import { useGuideify } from '@guideify/vue';
const { start, track, identify } = useGuideify();
</script>

<template>
  <button v-guideify-target="'create-project'" @click="create">New project</button>
</template>

v-guideify-target

The paved path from BUILD_REPORT §3.6. data-guideify-id is the resolver's first tier: a step aimed at one never scores candidates, never lands on the wrong element, and never drifts when the classes around it change.

A directive rather than a wrapper component, which is why there is no single-child rule here as there is in React — Vue can set the attribute on the element without standing anything around it. Registered by the plugin, so it is one install rather than a second import.

Bind a computed id and it repoints on change; bind an empty one and the attribute is removed rather than left stale.

What it does not bundle

The core is not in this package. The plugin injects the loader tag and the runtime arrives from the CDN, which is what keeps a canary (R-03) and the kill switch (R-04) able to reach you. Every import from @guideify/js here is import type, and test/boundary.test.mjs fails the build if that changes.

• Already have the script tag? Keep it. The plugin never injects over an existing window.guideify, so having both is the documented upgrade path.
• Calls before the core lands are queued, not lost. The exception is on(), which owes you an unsubscribe immediately; this package holds the subscription and attaches it on arrival. Inside setup() it is also released automatically when the component unmounts.

Options

createGuideify takes exactly what a script tag can carry, because the tag is what initialises the core: apiKey (required), cdnHost, ingestHost, publicKey, debug, nonce.

manualOnly, apiHost, dashboardOrigin and config have no script-tag equivalent and are deliberately absent from the type rather than accepted and ignored. Use @guideify/js directly if you need them.

License

Proprietary — see LICENSE. You may bundle this into your own application and serve it to your users; you may not redistribute it on its own.