@presage-kit/vue

Vue bindings for Presage — reactive composables and plugin for Vue 3.3+.

Install

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

Quick Start

1. Register the plugin

import { createApp } from 'vue'
import { AdaptivePlugin } from '@presage-kit/vue'
import { client } from './adaptive-client'

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

2. Declarative adaptation

<template>
  <Adaptive id="onboarding-banner" defaultVariant="standard">
    <Variant id="standard"><StandardWelcome /></Variant>
    <Variant id="checklist"><OnboardingChecklist /></Variant>
    <Variant id="whats-new"><WhatsNewFeed /></Variant>
  </Adaptive>
</template>

<script setup>
import { Adaptive, Variant } from '@presage-kit/vue'
</script>

3. Use in components

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

const { selectedVariant, track } = useAdaptive('export-panel', {
  variants: ['simple', 'advanced'] as const,
  defaultVariant: 'simple',
})
</script>

<template>
  <AdvancedExport v-if="selectedVariant === 'advanced'" />
  <SimpleExport v-else />
  <button @click="track('export_clicked')">Export</button>
</template>

3. Lightweight variant access

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

const variant = useVariant('layout', {
  variants: ['compact', 'comfortable'] as const,
  defaultVariant: 'comfortable',
})
</script>

4. Adaptive ordering (any list)

<template>
  <AdaptiveOrder id="feature-cards" :items="cards" v-slot="{ item }">
    <Card :title="item.title" />
  </AdaptiveOrder>
</template>

<script setup>
import { AdaptiveOrder } from '@presage-kit/vue'

const cards = [
  { id: 'export', title: 'Export' },
  { id: 'import', title: 'Import' },
  { id: 'sync', title: 'Sync' },
]
</script>

5. Adaptive navigation

AdaptiveNav is a thin wrapper around AdaptiveOrder for navigation use cases.

<template>
  <AdaptiveNav id="main-nav" :items="navItems" v-slot="{ item }">
    <a :href="item.href">{{ item.label }}</a>
  </AdaptiveNav>
</template>

<script setup>
import { AdaptiveNav } from '@presage-kit/vue'

const navItems = [
  { id: 'dashboard', label: 'Dashboard', href: '/dashboard' },
  { id: 'analytics', label: 'Analytics', href: '/analytics' },
]
</script>

API

| Export | Description | |--------|-------------| | AdaptivePlugin | Vue plugin — registers the client via app.provide() | | Adaptive / Variant | Declarative variant selection based on rules | | AdaptiveOrder | Reorders any list of items based on rules (scoped slot) | | AdaptiveNav | Navigation ordering (thin wrapper around AdaptiveOrder) | | useAdaptive | Full reactive composable with type-safe variants | | useVariant | Lightweight composable — returns just the variant string | | useAdaptiveClient | Direct access to the underlying client |

Docs

presage-kit.dev

License

Proprietary. See LICENSE.