@varykit/vue 0.1.0

package/README.md

@@ -0,0 +1,75 @@
+# @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
+
+```bash
+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.
+
+```vue
+<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.
+
+```vue
+<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

package/dist/index.d.mts

@@ -0,0 +1,66 @@
+import * as vue from 'vue';
+import { Ref, PropType } from 'vue';
+import { VarySegments } from '@varykit/core';
+export { DEFAULT_DURATION, ResolvedSegment, VarySegmentConfig, VarySegments, resolveSegment, validateSegments } from '@varykit/core';
+
+interface UseSegmentOptions {
+    duration?: number;
+    cookieName?: string;
+}
+interface UseSegmentReturn {
+    segment: Ref<string>;
+}
+/**
+ * Resolve the visitor's single global segment, persisting it in the
+ * `vary:segment` cookie so the assignment is sticky across requests.
+ *
+ * The same segment is reused across every page and element test.
+ */
+declare function useSegment(segments: VarySegments, options?: UseSegmentOptions): UseSegmentReturn;
+
+/**
+ * Template-only wrapper around `useSegment()`.
+ *
+ * Renders its default slot only when the visitor's global segment matches
+ * the `segment` prop.
+ *
+ * ```vue
+ * <VaryShow :segments="segments" segment="control">
+ *   <p>Control content</p>
+ * </VaryShow>
+ * ```
+ */
+declare const VaryShow: vue.DefineComponent<vue.ExtractPropTypes<{
+    segment: {
+        type: StringConstructor;
+        required: true;
+    };
+    segments: {
+        type: PropType<VarySegments>;
+        required: true;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    segment: {
+        type: StringConstructor;
+        required: true;
+    };
+    segments: {
+        type: PropType<VarySegments>;
+        required: true;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    duration: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { VaryShow, useSegment };
+export type { UseSegmentOptions, UseSegmentReturn };

package/dist/index.d.ts

@@ -0,0 +1,66 @@
+import * as vue from 'vue';
+import { Ref, PropType } from 'vue';
+import { VarySegments } from '@varykit/core';
+export { DEFAULT_DURATION, ResolvedSegment, VarySegmentConfig, VarySegments, resolveSegment, validateSegments } from '@varykit/core';
+
+interface UseSegmentOptions {
+    duration?: number;
+    cookieName?: string;
+}
+interface UseSegmentReturn {
+    segment: Ref<string>;
+}
+/**
+ * Resolve the visitor's single global segment, persisting it in the
+ * `vary:segment` cookie so the assignment is sticky across requests.
+ *
+ * The same segment is reused across every page and element test.
+ */
+declare function useSegment(segments: VarySegments, options?: UseSegmentOptions): UseSegmentReturn;
+
+/**
+ * Template-only wrapper around `useSegment()`.
+ *
+ * Renders its default slot only when the visitor's global segment matches
+ * the `segment` prop.
+ *
+ * ```vue
+ * <VaryShow :segments="segments" segment="control">
+ *   <p>Control content</p>
+ * </VaryShow>
+ * ```
+ */
+declare const VaryShow: vue.DefineComponent<vue.ExtractPropTypes<{
+    segment: {
+        type: StringConstructor;
+        required: true;
+    };
+    segments: {
+        type: PropType<VarySegments>;
+        required: true;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>, () => vue.VNode<vue.RendererNode, vue.RendererElement, {
+    [key: string]: any;
+}>[] | null | undefined, {}, {}, {}, vue.ComponentOptionsMixin, vue.ComponentOptionsMixin, {}, string, vue.PublicProps, Readonly<vue.ExtractPropTypes<{
+    segment: {
+        type: StringConstructor;
+        required: true;
+    };
+    segments: {
+        type: PropType<VarySegments>;
+        required: true;
+    };
+    duration: {
+        type: NumberConstructor;
+        default: undefined;
+    };
+}>> & Readonly<{}>, {
+    duration: number;
+}, {}, {}, {}, string, vue.ComponentProvideOptions, true, {}, any>;
+
+export { VaryShow, useSegment };
+export type { UseSegmentOptions, UseSegmentReturn };

package/dist/index.mjs

@@ -0,0 +1,50 @@
+import { ref, defineComponent } from 'vue';
+import { resolveSegment } from '@varykit/core';
+export { DEFAULT_DURATION, resolveSegment, validateSegments } from '@varykit/core';
+
+function getCookie(name) {
+  if (typeof document === "undefined") return void 0;
+  const match = document.cookie.split("; ").find((row) => row.startsWith(`${name}=`));
+  return match ? decodeURIComponent(match.slice(name.length + 1)) : void 0;
+}
+function setCookie(name, value, maxAge) {
+  if (typeof document === "undefined") return;
+  document.cookie = `${name}=${encodeURIComponent(value)}; path=/; max-age=${maxAge}`;
+}
+function useSegment(segments, options = {}) {
+  const cookieName = options.cookieName ?? "vary:segment";
+  const existingSegment = getCookie(cookieName);
+  const resolved = resolveSegment({
+    segments,
+    existingSegment,
+    defaultDuration: options.duration
+  });
+  setCookie(cookieName, resolved.segment, resolved.duration);
+  return { segment: ref(resolved.segment) };
+}
+
+const VaryShow = defineComponent({
+  name: "VaryShow",
+  props: {
+    segment: {
+      type: String,
+      required: true
+    },
+    segments: {
+      type: Object,
+      required: true
+    },
+    duration: {
+      type: Number,
+      default: void 0
+    }
+  },
+  setup(props, { slots }) {
+    const { segment } = useSegment(props.segments, {
+      duration: props.duration
+    });
+    return () => segment.value === props.segment ? slots.default?.() : null;
+  }
+});
+
+export { VaryShow, useSegment };

package/package.json

@@ -0,0 +1,42 @@
+{
+  "name": "@varykit/vue",
+  "version": "0.1.0",
+  "description": "Vue 3 composable and component for VaryKit element-level multivariate testing.",
+  "license": "MIT",
+  "type": "module",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.mts",
+      "import": "./dist/index.mjs"
+    }
+  },
+  "main": "./dist/index.mjs",
+  "types": "./dist/index.d.mts",
+  "files": [
+    "dist"
+  ],
+  "scripts": {
+    "build": "unbuild",
+    "typecheck": "tsc --noEmit"
+  },
+  "keywords": [
+    "vue",
+    "a/b-testing",
+    "multivariate",
+    "ab-test",
+    "experimentation",
+    "bucketing",
+    "varykit"
+  ],
+  "dependencies": {
+    "@varykit/core": "workspace:*"
+  },
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "typescript": "^5.0.0",
+    "unbuild": "^3.0.0",
+    "vue": "^3.0.0"
+  }
+}