feat(vue): add @tryabby/vue integration

.changeset/add-vue-integration.md

@@ -0,0 +1,5 @@
+---
+"@tryabby/vue": minor
+---
+
+Add `@tryabby/vue` with Vue 3 composables (`useAbby`, `useFeatureFlag`, `useRemoteConfig`), `AbbyProvider`, and `AbbyPlugin`.

apps/docs/pages/integrations/_meta.json

@@ -3,6 +3,7 @@
   "react": "React",
   "remix": "Remix",
   "svelte": "Svelte",
+  "vue": "Vue",
   "angular": "Angular",
   "node": "Node",
   "express": "Express",

apps/docs/pages/integrations/vue.mdx

@@ -0,0 +1,110 @@
+import { Tab, Tabs, Callout } from "nextra-theme-docs";
+
+# Vue
+
+Our Vue integration works with Vue 3 and is designed for SPAs as well as Nuxt apps.
+
+<Callout>
+  Prefer the React docs for conceptual overlap: [React integration](/integrations/react)
+</Callout>
+
+## Installation
+
+<Tabs items={["npm", "yarn", "pnpm"]}>
+  <Tab>
+    ```bash
+    npm i @tryabby/vue
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    yarn add @tryabby/vue
+    ```
+  </Tab>
+  <Tab>
+    ```bash
+    pnpm i @tryabby/vue
+    ```
+  </Tab>
+</Tabs>
+
+## Create your config
+
+```ts
+// abby.ts
+import { createAbby, defineConfig } from "@tryabby/vue";
+
+export const abby = createAbby({
+  projectId: "your-project-id",
+  currentEnvironment: process.env.NODE_ENV!,
+  environments: ["development", "production"],
+  tests: {
+    Home: {
+      variants: ["A", "B"],
+    },
+  },
+  flags: ["showBanner"],
+  remoteConfig: {
+    title: "String",
+  },
+});
+
+export const {
+  AbbyProvider,
+  AbbyPlugin,
+  useAbby,
+  useFeatureFlag,
+  useRemoteConfig,
+} = abby;
+```
+
+You can also share the same config object via `defineConfig` like the other packages.
+
+## Provider vs Plugin
+
+Wrap part of your tree with `AbbyProvider`, or install `AbbyPlugin` on the Vue app (recommended for Nuxt / whole-app setup):
+
+```ts
+import { createApp } from "vue";
+import { AbbyPlugin } from "./abby";
+import App from "./App.vue";
+
+createApp(App).use(AbbyPlugin).mount("#app");
+```
+
+## useAbby
+
+```vue
+<script setup lang="ts">
+import { useAbby } from "./abby";
+
+const { variant, onAct } = useAbby("Home");
+</script>
+
+<template>
+  <div>
+    <p>You are in variant {{ variant }}</p>
+    <button @click="onAct">Convert</button>
+  </div>
+</template>
+```
+
+`variant` is a `ComputedRef`. Optional lookup maps work the same as in React:
+
+```ts
+const { variant } = useAbby("Home", {
+  A: "Control copy",
+  B: "New copy",
+});
+```
+
+## useFeatureFlag / useRemoteConfig
+
+```ts
+const showBanner = useFeatureFlag("showBanner"); // ComputedRef<boolean>
+const title = useRemoteConfig("title"); // ComputedRef<string>
+```
+
+## Sync helpers
+
+`getABTestValue`, `getFeatureFlagValue`, `getRemoteConfig`, `getVariants`, and `getABResetFunction` match the React package and can be used outside of `setup()`.

packages/vue/.gitignore

@@ -0,0 +1 @@
+dist

packages/vue/README.md

@@ -0,0 +1,80 @@
+# @tryabby/vue
+
+Vue 3 integration for [Abby](https://www.tryabby.com) with feature parity to the React package.
+
+## Installation
+
+```bash
+pnpm add @tryabby/vue
+# or
+npm i @tryabby/vue
+```
+
+## Quick start
+
+```ts
+// abby.ts
+import { createAbby } from "@tryabby/vue";
+
+export const {
+  AbbyProvider,
+  AbbyPlugin,
+  useAbby,
+  useFeatureFlag,
+  useRemoteConfig,
+} = createAbby({
+  projectId: "your-project-id",
+  currentEnvironment: process.env.NODE_ENV!,
+  environments: ["development", "production"],
+  tests: {
+    hero: { variants: ["A", "B"] },
+  },
+  flags: ["newCheckout"],
+  remoteConfig: {
+    greeting: "String",
+  },
+});
+```
+
+### With a provider
+
+```vue
+<script setup lang="ts">
+import { AbbyProvider, useAbby, useFeatureFlag } from "./abby";
+
+const { variant, onAct } = useAbby("hero");
+const newCheckout = useFeatureFlag("newCheckout");
+</script>
+
+<template>
+  <AbbyProvider>
+    <button @click="onAct">Variant: {{ variant }}</button>
+    <p v-if="newCheckout">New checkout enabled</p>
+  </AbbyProvider>
+</template>
+```
+
+### With the Vue plugin (Nuxt-friendly)
+
+```ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import { AbbyPlugin } from "./abby";
+
+createApp(App).use(AbbyPlugin).mount("#app");
+```
+
+## API
+
+| Export | Description |
+| --- | --- |
+| `useAbby(testName, lookup?)` | Reactive `{ variant, onAct }` for an A/B test |
+| `useFeatureFlag(name)` | Reactive boolean flag |
+| `useRemoteConfig(name)` | Reactive remote config value |
+| `useFeatureFlags()` / `useRemoteConfigVariables()` | Lists of all flags / configs |
+| `getABTestValue` / `getFeatureFlagValue` / `getRemoteConfig` | Sync getters |
+| `getVariants` / `getABResetFunction` | Test helpers |
+| `AbbyProvider` / `AbbyPlugin` | Provide Abby context |
+| `withDevtools` | Optional Abby Devtools component factory |
+
+See also the [React docs](https://docs.tryabby.com/integrations/react) — this package mirrors that surface for Vue 3.

packages/vue/package.json

@@ -0,0 +1,46 @@
+{
+  "name": "@tryabby/vue",
+  "version": "7.0.1",
+  "description": "Vue 3 integration for Abby",
+  "main": "dist/index.js",
+  "files": ["dist"],
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "exports": {
+    ".": {
+      "types": "./dist/index.d.ts",
+      "import": "./dist/index.mjs",
+      "require": "./dist/index.js"
+    }
+  },
+  "scripts": {
+    "build": "tsup src/",
+    "dev": "pnpm run build --watch",
+    "test": "vitest"
+  },
+  "homepage": "https://docs.tryabby.com",
+  "keywords": ["vue", "vue3", "nuxt", "ab-testing", "feature-flags"],
+  "author": "",
+  "license": "ISC",
+  "devDependencies": {
+    "@tryabby/devtools": "workspace:*",
+    "@types/js-cookie": "^3.0.3",
+    "@vue/test-utils": "^2.4.6",
+    "jsdom": "^20.0.3",
+    "msw": "^0.49.1",
+    "node-fetch": "^3.3.0",
+    "tsconfig": "workspace:*",
+    "tsup": "^6.5.0",
+    "typescript": "5.5.4",
+    "vite": "5.4.0",
+    "vitest": "2.0.5",
+    "vue": "^3.4.38"
+  },
+  "peerDependencies": {
+    "vue": "^3.3.0"
+  },
+  "dependencies": {
+    "@tryabby/core": "workspace:*",
+    "js-cookie": "^3.0.1"
+  }
+}

packages/vue/src/StorageService.ts

@@ -0,0 +1,74 @@
+import {
+  type IStorageService,
+  type StorageServiceOptions,
+  getABStorageKey,
+  getFFStorageKey,
+  getRCStorageKey,
+} from "@tryabby/core";
+import Cookie from "js-cookie";
+
+const DEFAULT_COOKIE_AGE = 365;
+
+class ABStorageService implements IStorageService {
+  get(projectId: string, testName: string): string | null {
+    const retrievedValue = Cookie.get(getABStorageKey(projectId, testName));
+    if (!retrievedValue) return null;
+
+    return retrievedValue;
+  }
+
+  set(
+    projectId: string,
+    testName: string,
+    value: string,
+    options?: StorageServiceOptions
+  ): void {
+    Cookie.set(getABStorageKey(projectId, testName), value, {
+      expires: options?.expiresInDays ?? DEFAULT_COOKIE_AGE,
+    });
+  }
+
+  remove(projectId: string, testName: string): void {
+    Cookie.remove(getABStorageKey(projectId, testName));
+  }
+}
+
+class FFStorageService implements IStorageService {
+  get(projectId: string, flagName: string): string | null {
+    const retrievedValue = Cookie.get(getFFStorageKey(projectId, flagName));
+    if (!retrievedValue) return null;
+
+    return retrievedValue;
+  }
+
+  set(projectId: string, flagName: string, value: string): void {
+    Cookie.set(getFFStorageKey(projectId, flagName), value, {
+      expires: DEFAULT_COOKIE_AGE,
+    });
+  }
+
+  remove(projectId: string, flagName: string): void {
+    Cookie.remove(getFFStorageKey(projectId, flagName));
+  }
+}
+
+class RCStorageService implements IStorageService {
+  get(projectId: string, key: string): string | null {
+    const retrievedValue = Cookie.get(getRCStorageKey(projectId, key));
+    return retrievedValue ?? null;
+  }
+
+  set(projectId: string, key: string, value: string): void {
+    Cookie.set(getRCStorageKey(projectId, key), value, {
+      expires: DEFAULT_COOKIE_AGE,
+    });
+  }
+
+  remove(projectId: string, key: string): void {
+    Cookie.remove(getRCStorageKey(projectId, key));
+  }
+}
+
+export const TestStorageService = new ABStorageService();
+export const FlagStorageService = new FFStorageService();
+export const RemoteConfigStorageService = new RCStorageService();