@presage-kit/vue

Bindings de Vue 3 para Presage. Proporciona un plugin para inyeccion de dependencias y composables para adaptacion reactiva.

pnpm add @presage-kit/core @presage-kit/vue

AdaptivePlugin

Un plugin de Vue 3 que proporciona el AdaptiveClient a todos los componentes mediante provide/inject.

import { createApp } from 'vue'
import { AdaptivePlugin } from '@presage-kit/vue'
import { createAdaptiveClient } from '@presage-kit/core'

const client = createAdaptiveClient({ /* ... */ })

const app = createApp(App)
app.use(AdaptivePlugin, { client })
app.mount('#app')

Opciones de instalacion: AdaptivePluginOptions

interface AdaptivePluginOptions {
  client: AdaptiveClient
}

Opcion	Tipo	Requerido	Descripcion
client	AdaptiveClient	Si	Cliente creado con createAdaptiveClient()

Implementacion: Llama a app.provide() con un simbolo de clave de inyeccion, haciendo que el cliente este disponible para todos los componentes descendientes.

useAdaptive(adaptationId, config)

Resuelve un adaptation point de forma reactiva. Se reevalua cuando el contexto del usuario cambia.

import { useAdaptive } from '@presage-kit/vue'

const { selectedVariant, resolution, context, track } = useAdaptive('onboarding', {
  variants: ['guided-tour', 'standard', 'minimal'] as const,
  defaultVariant: 'standard',
})

Parametros:

Parametro	Tipo	Descripcion
adaptationId	string	ID unico del adaptation point
config.variants	readonly V[]	Array de IDs de variantes
config.defaultVariant	NoInfer<V>	Variante por defecto (debe estar en variants)
config.strategy	Strategy	Opcional. Por defecto { type: 'rules' }

Tipo de retorno:

El objeto devuelto utiliza getters de JavaScript respaldados por computed() refs de Vue, haciendo todos los valores reactivos.

Campo	Tipo	Descripcion
selectedVariant	V (getter)	Variante seleccionada actualmente
resolution	ResolvedAdaptation (getter)	Metadatos completos de resolucion
context	UserContext (getter)	Contexto actual del usuario
track	(event: string, props?: Record<string, unknown>) => void	Funcion de rastreo con scope

Reactividad: El composable utiliza internamente useAtom() para conectar el estado basado en atoms del core con el sistema de reactividad de Vue. Cuando el estado del cliente cambia, todos los valores computados se actualizan automaticamente.

Impresiones: Usa watch() de Vue con { immediate: true } para rastrear eventos presage:impression cuando la variante seleccionada cambia.

Uso en templates:

<script setup lang="ts">
import { useAdaptive } from '@presage-kit/vue'

const { selectedVariant } = useAdaptive('panel', {
  variants: ['compact', 'expanded'] as const,
  defaultVariant: 'compact',
})
</script>

<template>
  <CompactPanel v-if="selectedVariant === 'compact'" />
  <ExpandedPanel v-else />
</template>

useVariant(adaptationId, config)

Composable ligero que devuelve unicamente la cadena de la variante seleccionada.

import { useVariant } from '@presage-kit/vue'

const variant = useVariant('layout', {
  variants: ['sidebar', 'topnav'] as const,
  defaultVariant: 'sidebar',
})

Parametros: Los mismos que useAdaptive().

Tipo de retorno: V — La cadena de la variante seleccionada (getter reactivo).

Internamente delega a useAdaptive() y devuelve selectedVariant.

Uso en templates:

<script setup lang="ts">
import { useVariant } from '@presage-kit/vue'

const variant = useVariant('cta-style', {
  variants: ['primary', 'secondary'] as const,
  defaultVariant: 'primary',
})
</script>

<template>
  <button :class="`btn btn--${variant}`">Get Started</button>
</template>

useAdaptiveClient()

Devuelve la instancia de AdaptiveClient desde la inyeccion del plugin.

import { useAdaptiveClient } from '@presage-kit/vue'

const client = useAdaptiveClient()

client.track('feature_used', { featureId: 'export' })
client.identify('user-789', { role: 'admin' })
const context = client.getContext()

Tipo de retorno: AdaptiveClient

Lanza: Error si el AdaptivePlugin no ha sido instalado.

Patrones comunes:

<script setup lang="ts">
import { useAdaptiveClient } from '@presage-kit/vue'

const client = useAdaptiveClient()

// Identify after authentication
onMounted(() => {
  const user = getCurrentUser()
  client.identify(user.id, {
    role: user.role,
    plan: user.plan,
    signupDate: user.createdAt,
  })
})

// Track actions
function handleExport() {
  client.track('feature_used', { featureId: 'export' })
  doExport()
}

// Evaluate rules imperatively
function getNavAction() {
  return client.evaluateAction('sidebar-nav')
}
</script>

Diferencias con el adaptador React

Funcionalidad	React	Vue
Proveedor	Componente <AdaptiveProvider>	AdaptivePlugin (plugin de Vue)
Componente declarativo	<Adaptive> + <Variant>	No incluido (use v-if con useAdaptive())
Navegacion adaptativa	Componente <AdaptiveNav>	Manual con evaluateAction()
Retorno de hook/composable	Objeto simple	Objeto con getters reactivos
Puente de estado	Estilo useSyncExternalStore	ref + atom subscribe()

El adaptador Vue es intencionalmente mas ligero. La sintaxis de templates de Vue y su sistema de reactividad hacen natural el uso de v-if/v-else con el valor de retorno del composable, eliminando la necesidad de componentes envolventes como <Adaptive>.