@varykit/vue

Vue 3 composable and component for VaryKit segment-based multivariate testing.

This package works in any Vue 3 app (Vite, plain Vue Router, etc.) with no Nuxt present. It depends on @varykit/core for bucketing and declares vue as a peer dependency.

The segment model

Every visitor is assigned to a single global segment (e.g. control or treatment), persisted in the vary:segment cookie. That segment is reused consistently across every element and page — a visitor is never in different segments for different tests.

Install

pnpm add @varykit/vue

Usage

useSegment(segments, options?)

Resolves the visitor's global segment, persisting it in the vary:segment cookie so the assignment is sticky. Returns a reactive { segment } ref.

<script setup>
import { useSegment } from '@varykit/vue'

const segments = {
  control: { distribution: 0.5 },
  treatment: { distribution: 0.5 }
}

const { segment } = useSegment(segments)
</script>

<template>
  <p v-if="segment === 'control'">Control content</p>
  <p v-else>Treatment content</p>
</template>

<VaryShow>

A template-only wrapper around useSegment(). Renders its default slot only when the visitor's segment matches the segment prop.

<script setup>
import { VaryShow } from '@varykit/vue'

const segments = {
  control: { distribution: 0.5 },
  treatment: { distribution: 0.5 }
}
</script>

<template>
  <VaryShow :segments="segments" segment="control">
    <p>Control content</p>
  </VaryShow>
</template>

Options

| Option | Type | Description | | ------ | ---- | ----------- | | duration | number | Global default cookie duration in seconds. | | cookieName | string | Override the cookie name (default vary:segment). |

Scope

This package owns Vue-specific persistence (document.cookie) and reactivity. It never imports from @varykit/nuxt.

License

MIT