feat(vue): add @tryabby/vue integration package

.changeset/vue-integration.md

@@ -0,0 +1,5 @@
+---
+"@tryabby/vue": minor
+---
+
+Add the `@tryabby/vue` package with Vue 3 composables (`useAbby`, `useFeatureFlag`, `useRemoteConfig`), `AbbyVuePlugin`, `AbbyProvider`, and SSR/hydration support.

packages/vue/.gitignore

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

packages/vue/README.md

@@ -0,0 +1,104 @@
+# @tryabby/vue
+
+Vue 3 integration for [Abby](https://www.tryabby.com) (A/B testing, feature flags, and remote config). Supports Vue 3 and Nuxt 3 with full TypeScript inference.
+
+## Installation
+
+```bash
+pnpm add @tryabby/vue
+# or
+npm install @tryabby/vue
+```
+
+## Setup
+
+Create your Abby instance in a separate file (e.g. `./abby.ts`):
+
+```ts
+import { createAbby } from "@tryabby/vue";
+
+export const abby = createAbby({
+  projectId: "<your-project-id>",
+  currentEnvironment: "production",
+  environments: ["development", "production"],
+  tests: {
+    "footer-abtest": { variants: ["current", "new"] },
+  },
+  flags: ["new-features"],
+  remoteConfig: {
+    "button-color": "String",
+  },
+});
+```
+
+### Register the Vue Plugin or Provider
+
+Register `AbbyVuePlugin` app-wide with `app.use()`:
+
+```ts
+import { createApp } from "vue";
+import { abby } from "./abby";
+
+const app = createApp(App);
+app.use(abby.AbbyVuePlugin);
+app.mount("#app");
+```
+
+Or wrap parts of your component tree with `<AbbyProvider>`:
+
+```vue
+<script setup lang="ts">
+import { abby } from "./abby";
+</script>
+
+<template>
+  <abby.AbbyProvider>
+    <RouterView />
+  </abby.AbbyProvider>
+</template>
+```
+
+## Composables
+
+### `useAbby`
+
+```vue
+<script setup lang="ts">
+import { abby } from "./abby";
+
+const { variant, onAct } = abby.useAbby("footer-abtest");
+</script>
+
+<template>
+  <Footer v-if="variant === 'current'" />
+  <NewFooter v-else-if="variant === 'new'" @purchase="onAct()" />
+</template>
+```
+
+### `useFeatureFlag`
+
+```vue
+<script setup lang="ts">
+import { abby } from "./abby";
+
+const showNewFeatures = abby.useFeatureFlag("new-features");
+</script>
+
+<template>
+  <div v-if="showNewFeatures">New Feature</div>
+</template>
+```
+
+### `useRemoteConfig`
+
+```vue
+<script setup lang="ts">
+import { abby } from "./abby";
+
+const buttonColor = abby.useRemoteConfig("button-color");
+</script>
+
+<template>
+  <button :style="{ color: buttonColor }">Click me</button>
+</template>
+```

packages/vue/package.json

@@ -0,0 +1,53 @@
+{
+  "name": "@tryabby/vue",
+  "version": "0.1.0",
+  "description": "Vue 3 integration for Abby",
+  "homepage": "https://docs.tryabby.com",
+  "main": "dist/index.js",
+  "module": "dist/index.mjs",
+  "types": "dist/index.d.ts",
+  "files": ["dist"],
+  "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"
+  },
+  "keywords": [
+    "vue",
+    "vue3",
+    "nuxt",
+    "feature-flags",
+    "ab-testing",
+    "remote-config"
+  ],
+  "author": "",
+  "license": "ISC",
+  "peerDependencies": {
+    "vue": "^3.0.0"
+  },
+  "devDependencies": {
+    "@types/js-cookie": "^3.0.3",
+    "@vue/server-renderer": "^3.4.0",
+    "@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.0"
+  },
+  "dependencies": {
+    "@tryabby/core": "workspace:*",
+    "js-cookie": "^3.0.1"
+  }
+}

packages/vue/src/StorageService.ts

@@ -0,0 +1,76 @@
+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
+        ? 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();