@presage-kit/vue

Bindings Vue 3 pour Presage. Fournit un plugin pour l’injection de dépendances et des composables pour l’adaptation réactive.

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

AdaptivePlugin

Un plugin Vue 3 qui fournit le AdaptiveClient à tous les composants via 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')

Options d’installation : AdaptivePluginOptions

interface AdaptivePluginOptions {
  client: AdaptiveClient
}

Option	Type	Requis	Description
client	AdaptiveClient	Oui	Client issu de createAdaptiveClient()

Implémentation : Appelle app.provide() avec un symbole de clé d’injection, rendant le client disponible pour tous les composants descendants.

useAdaptive(adaptationId, config)

Résout un point d’adaptation de manière réactive. Réévalue quand le contexte utilisateur change.

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

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

Paramètres :

Param	Type	Description
adaptationId	string	ID unique du point d’adaptation
config.variants	readonly V[]	Tableau d’IDs de variantes
config.defaultVariant	NoInfer<V>	Variante par défaut (doit figurer dans variants)
config.strategy	Strategy	Optionnel. Par défaut { type: 'rules' }

Type de retour :

L’objet retourné utilise des getters JavaScript basés sur les computed() de Vue, rendant toutes les valeurs réactives.

Champ	Type	Description
selectedVariant	V (getter)	Variante actuellement sélectionnée
resolution	ResolvedAdaptation (getter)	Métadonnées complètes de résolution
context	UserContext (getter)	Contexte utilisateur courant
track	(event: string, props?: Record<string, unknown>) => void	Fonction de suivi scopée

Réactivité : Le composable utilise useAtom() en interne pour faire le pont entre l’état basé sur les atomes du core et le système de réactivité de Vue. Quand l’état du client change, toutes les valeurs computed se mettent à jour automatiquement.

Impressions : Utilise watch() de Vue avec { immediate: true } pour suivre les événements presage:impression quand la variante sélectionnée change.

Utilisation dans les 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 léger retournant uniquement la chaîne de la variante sélectionnée.

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

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

Paramètres : Identiques à useAdaptive().

Type de retour : V — La chaîne de la variante sélectionnée (getter réactif).

Délègue en interne à useAdaptive() et retourne selectedVariant.

Utilisation dans les 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()

Retourne l’instance AdaptiveClient depuis l’injection du 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()

Type de retour : AdaptiveClient

Lance une erreur : Error si AdaptivePlugin n’a pas été installé.

Patterns courants :

<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>

Différences avec l’adaptateur React

Fonctionnalité	React	Vue
Provider	Composant <AdaptiveProvider>	AdaptivePlugin (plugin Vue)
Composant déclaratif	<Adaptive> + <Variant>	Non inclus (utilisez v-if avec useAdaptive())
Navigation adaptative	Composant <AdaptiveNav>	Manuel avec evaluateAction()
Retour du hook/composable	Objet simple	Objet avec getters réactifs
Pont vers l’état	Style useSyncExternalStore	ref + subscribe() de l’atome

L’adaptateur Vue est volontairement plus léger. La syntaxe de template et le système de réactivité de Vue rendent naturelle l’utilisation de v-if/v-else avec la valeur retournée par le composable, éliminant le besoin de composants wrapper comme <Adaptive>.