diff --git a/.changeset/quiet-vue-hearts.md b/.changeset/quiet-vue-hearts.md
new file mode 100644
index 00000000..bbae68bf
--- /dev/null
+++ b/.changeset/quiet-vue-hearts.md
@@ -0,0 +1,5 @@
+---
+"@tryabby/vue": minor
+---
+
+add Vue integration
diff --git a/apps/docs/pages/integrations/_meta.json b/apps/docs/pages/integrations/_meta.json
index 5cbf2999..1f8b2ad8 100644
--- a/apps/docs/pages/integrations/_meta.json
+++ b/apps/docs/pages/integrations/_meta.json
@@ -3,6 +3,7 @@
"react": "React",
"remix": "Remix",
"svelte": "Svelte",
+ "vue": "Vue",
"angular": "Angular",
"node": "Node",
"express": "Express",
diff --git a/apps/docs/pages/integrations/vue.mdx b/apps/docs/pages/integrations/vue.mdx
new file mode 100644
index 00000000..db679076
--- /dev/null
+++ b/apps/docs/pages/integrations/vue.mdx
@@ -0,0 +1,205 @@
+import { Tab, Tabs, Callout } from "nextra-theme-docs";
+
+# Vue
+
+Our Vue integration works with Vue 3.5 or later. It works with SPAs as well as server side rendered apps like [Nuxt](#nuxt).
+
+## Installation
+
+To get started make sure to install the package using your favorite package manager.
+
+
+
+ ```bash
+ npm i @tryabby/vue
+ ```
+
+
+ ```bash
+ yarn add @tryabby/vue
+ ```
+
+
+ ```bash
+ pnpm i @tryabby/vue
+ ```
+
+
+
+### Create your config
+
+To use Abby you need to create your config first. You can do this by creating a file called `abby.config.ts` in your `root` folder. This file will be used to configure your project.
+
+```ts
+// abby.config.ts
+import { defineConfig } from "@tryabby/vue";
+
+export default defineConfig({
+ projectId: "",
+ currentEnvironment: process.env.NODE_ENV,
+ environments: ["production", "development"],
+ tests: {
+ test: { variants: ["A", "B"] },
+ footer: { variants: ["dark", "orange", "green"] },
+ // ... your tests
+ },
+ flags: ["darkMode", "newFeature"],
+ remoteConfig: {
+ customButtonText: "String",
+ },
+});
+```
+
+### Create your Instance
+
+To use Abby in your code you will need to create typed composables and a plugin first. You can do this by using the `createAbby` function.
+Please copy the id of your project from the dashboard to get started.
+
+```ts
+// abby.ts
+import { createAbby } from "@tryabby/vue";
+import abbyConfig from "../abby.config";
+
+export const { AbbyPlugin, useAbby, useFeatureFlag, useRemoteConfig } =
+ createAbby(abbyConfig);
+```
+
+### Install the plugin
+
+The composables need the `AbbyPlugin` to be installed in your app. The plugin loads your project's data in the background.
+
+```ts
+// main.ts
+import { createApp } from "vue";
+import App from "./App.vue";
+import { AbbyPlugin } from "./abby";
+
+createApp(App).use(AbbyPlugin).mount("#app");
+```
+
+You can now import the composables created by `createAbby` and use them in your components.
+
+## Usage
+
+The composables return [computed refs](https://vuejs.org/api/reactivity-core.html#computed), so your components update automatically
+when your data is loaded or when you change something in the [Devtools](/devtools).
+
+### useAbby
+
+The `useAbby` composable returns an object with the following values:
+
+- `variant` - A computed ref with the variant that is currently active
+- `onAct` - A function that you can call to trigger any kind of interaction with the tested component (will be used to track conversions)
+
+```vue
+
+
+
+
+ Cool Button
+
+
+```
+
+Optionally, you can pass a lookup object to automatically map the selected variant to a custom value.
+
+```vue
+
+
+
+ Cool Button
+
+```
+
+
+ The variant is an empty string until the component is mounted and the project data is loaded. The server can't know which
+ variant a user is going to see, so the variant is selected in the browser, using the weights from your dashboard.
+ This way server side rendering won't cause any hydration mismatches.
+
+
+### useFeatureFlag
+
+The `useFeatureFlag` composable returns a computed boolean that indicates if the flag is active or not.
+
+```vue
+
+
+
+ Here is the new feature
+
+```
+
+### useRemoteConfig
+
+The `useRemoteConfig` composable returns a computed value as specified in your `abby.config.ts`.
+The type of the returned value will automatically be inferred from your config.
+
+```vue
+
+
+
+ {{ customButtonText }}
+
+```
+
+### Devtools
+
+To use the [Devtools](/devtools) you need to install the `@tryabby/devtools` package and render the component created by `withDevtools`.
+They are only shown in development unless you pass `dangerouslyForceShow: true`.
+
+```vue
+
+
+
+
+```
+
+## Nuxt
+
+In Nuxt you install the plugin in a [Nuxt plugin](https://nuxt.com/docs/guide/directory-structure/plugins). If you load the data with `loadInitialData`,
+your flags and remote config are already rendered on the server, and the client reuses the data from the payload instead of fetching it again.
+
+```ts
+// plugins/abby.ts
+import { AbbyPlugin, loadInitialData } from "~/abby";
+
+export default defineNuxtPlugin(async (nuxtApp) => {
+ const { data } = await useAsyncData("abby", () => loadInitialData());
+ nuxtApp.vueApp.use(AbbyPlugin, { initialData: data.value ?? undefined });
+});
+```
+
+Make sure to also export `loadInitialData` from your `abby.ts`.
diff --git a/packages/vue/.gitignore b/packages/vue/.gitignore
new file mode 100644
index 00000000..53c37a16
--- /dev/null
+++ b/packages/vue/.gitignore
@@ -0,0 +1 @@
+dist
\ No newline at end of file
diff --git a/packages/vue/README.md b/packages/vue/README.md
new file mode 100644
index 00000000..56dae148
--- /dev/null
+++ b/packages/vue/README.md
@@ -0,0 +1,48 @@
+# @tryabby/vue
+
+Vue integration for [Abby](https://tryabby.com): feature flags, remote config and A/B tests with full type safety. Works with Vue 3.5+ and Nuxt.
+
+## Installation
+
+```bash
+npm i @tryabby/vue
+```
+
+## Usage
+
+```ts
+// abby.ts
+import { createAbby } from "@tryabby/vue";
+
+export const { AbbyPlugin, useAbby, useFeatureFlag, useRemoteConfig } =
+ createAbby({
+ projectId: "",
+ currentEnvironment: "production",
+ environments: ["production", "development"],
+ tests: { footer: { variants: ["dark", "orange", "green"] } },
+ flags: ["newFeature"],
+ remoteConfig: { customButtonText: "String" },
+ });
+```
+
+```ts
+// main.ts
+createApp(App).use(AbbyPlugin).mount("#app");
+```
+
+```vue
+
+
+
+ Here is the new feature
+ {{ buttonText }}
+
+```
+
+All composables return computed refs. Check out the [documentation](https://docs.tryabby.com/integrations/vue) for the full API, the devtools and the Nuxt setup.
diff --git a/packages/vue/package.json b/packages/vue/package.json
new file mode 100644
index 00000000..93f5abb6
--- /dev/null
+++ b/packages/vue/package.json
@@ -0,0 +1,47 @@
+{
+ "name": "@tryabby/vue",
+ "version": "0.0.0",
+ "description": "Vue integration for Abby: feature flags, remote config and A/B tests",
+ "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": "tsc --noEmit && vitest"
+ },
+ "homepage": "https://docs.tryabby.com",
+ "keywords": ["vue", "nuxt", "feature-flags", "ab-testing", "remote-config"],
+ "author": "",
+ "license": "ISC",
+ "devDependencies": {
+ "@tryabby/devtools": "workspace:*",
+ "@types/js-cookie": "^3.0.3",
+ "@vue/server-renderer": "^3.5.13",
+ "@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.5.13"
+ },
+ "peerDependencies": {
+ "vue": "^3.5.0"
+ },
+ "dependencies": {
+ "@tryabby/core": "workspace:*",
+ "js-cookie": "^3.0.1"
+ }
+}
diff --git a/packages/vue/src/StorageService.ts b/packages/vue/src/StorageService.ts
new file mode 100644
index 00000000..7633105e
--- /dev/null
+++ b/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();
diff --git a/packages/vue/src/createAbby.ts b/packages/vue/src/createAbby.ts
new file mode 100644
index 00000000..a5edd6d4
--- /dev/null
+++ b/packages/vue/src/createAbby.ts
@@ -0,0 +1,442 @@
+import {
+ type ABConfig,
+ Abby,
+ type AbbyConfig,
+ type AbbyDataResponse,
+ AbbyEventType,
+ HttpService,
+ type RemoteConfigValueString,
+ type RemoteConfigValueStringToType,
+ type ValidatorType,
+} from "@tryabby/core";
+import type { Infer } from "@tryabby/core/validation";
+import type { AbbyDevtoolProps, DevtoolsFactory } from "@tryabby/devtools";
+import {
+ type App,
+ type Component,
+ type ComputedRef,
+ type InjectionKey,
+ type ShallowRef,
+ computed,
+ defineComponent,
+ hasInjectionContext,
+ inject,
+ onMounted,
+ onUnmounted,
+ shallowRef,
+ watch,
+} from "vue";
+import {
+ FlagStorageService,
+ RemoteConfigStorageService,
+ TestStorageService,
+} from "./StorageService";
+
+export type ABTestReturnValue = Lookup extends undefined
+ ? TestVariant
+ : TestVariant extends keyof Lookup
+ ? Lookup[TestVariant]
+ : never;
+
+export type AbbyPluginOptions = {
+ /**
+ * Project data that was loaded beforehand, e.g. on the server with `loadInitialData()`.
+ * If it's not passed, the data is loaded in the browser once the plugin is installed.
+ */
+ initialData?: AbbyDataResponse;
+};
+
+export type withDevtoolsFunction = (
+ factory: DevtoolsFactory,
+ props?: Omit & {
+ dangerouslyForceShow?: boolean;
+ }
+) => Component;
+
+export function createAbby<
+ const FlagName extends string,
+ const TestName extends string,
+ const Tests extends Record,
+ const RemoteConfig extends Record,
+ const RemoteConfigName extends Extract,
+ const User extends Record = Record<
+ string,
+ ValidatorType
+ >,
+>(
+ abbyConfig: AbbyConfig<
+ FlagName,
+ Tests,
+ string[],
+ RemoteConfigName,
+ RemoteConfig,
+ User
+ >
+) {
+ // we need to keep the config as a const so that the types are narrowed
+ const config = abbyConfig;
+
+ const abby = new Abby<
+ FlagName,
+ TestName,
+ Tests,
+ RemoteConfig,
+ RemoteConfigName,
+ string[],
+ User
+ >(
+ abbyConfig,
+ {
+ get: (key: string) => {
+ if (typeof window === "undefined") return null;
+ return TestStorageService.get(config.projectId, key);
+ },
+ set: (key: string, value: any) => {
+ if (typeof window === "undefined" || config.cookies?.disableByDefault)
+ return;
+ TestStorageService.set(config.projectId, key, value);
+ },
+ },
+ {
+ get: (key: string) => {
+ if (typeof window === "undefined") return null;
+ return FlagStorageService.get(config.projectId, key);
+ },
+ set: (key: string, value: any) => {
+ if (typeof window === "undefined") return;
+ FlagStorageService.set(config.projectId, key, value);
+ },
+ },
+ {
+ get: (key: string) => {
+ if (typeof window === "undefined") return null;
+ return RemoteConfigStorageService.get(config.projectId, key);
+ },
+ set: (key: string, value: any) => {
+ if (typeof window === "undefined") return;
+ RemoteConfigStorageService.set(config.projectId, key, value);
+ },
+ }
+ );
+
+ type AbbyProjectData = ReturnType;
+
+ const AbbyDataKey: InjectionKey> = Symbol("abby");
+
+ /**
+ * `getProjectData()` selects and stores a variant for every test. Before the
+ * weights are loaded from the API that would use equal weights and keep that
+ * variant forever, so the tests are left out until the data is loaded.
+ */
+ const getDataWithoutTests = (): AbbyProjectData => ({
+ tests: {} as AbbyProjectData["tests"],
+ flags: Object.fromEntries(
+ abby.getFeatureFlags().map(({ name, value }) => [name, { value }])
+ ) as AbbyProjectData["flags"],
+ remoteConfig: Object.fromEntries(
+ abby
+ .getRemoteConfigVariables()
+ // the generic value type can't be narrowed here
+ .map(({ name, value }) => [name, { value: value as unknown }])
+ ) as AbbyProjectData["remoteConfig"],
+ });
+
+ /**
+ * Vue plugin that makes the Abby data available to the composables.
+ * The state lives on the app (not in this module) so every app, and every
+ * request when rendering on the server, gets its own copy.
+ */
+ const AbbyPlugin = {
+ install(app: App, options: AbbyPluginOptions = {}) {
+ // The core mutates its data in place and hands out the same nested objects,
+ // so the data is kept in a shallowRef and replaced with a fresh snapshot
+ // on every change. A deep ref would not notice the core's updates.
+ const data = shallowRef(
+ options.initialData
+ ? abby.init(options.initialData)
+ : getDataWithoutTests()
+ );
+ app.provide(AbbyDataKey, data);
+
+ // On the server the app is rendered once and never unmounted, so there
+ // is nothing to update and a subscription would leak on every request.
+ if (typeof window === "undefined") return;
+
+ const unsubscribe = abby.subscribe((newData) => {
+ data.value = newData as AbbyProjectData;
+ });
+ app.onUnmount(unsubscribe);
+
+ if (!options.initialData) {
+ // `init()` notifies the subscribers before it applies the local overrides
+ // from the cookies, so the resolved data is set once more afterwards.
+ // If the data can't be loaded, the tests fall back to the configured variants.
+ abby.loadProjectData().then((loadedData) => {
+ data.value = loadedData ?? abby.getProjectData();
+ });
+ }
+ },
+ };
+
+ const useAbbyData = () => {
+ const data = hasInjectionContext() ? inject(AbbyDataKey, null) : null;
+
+ if (!data) {
+ throw new Error(
+ "Abby composables must be used inside the setup of a component in an app that uses the AbbyPlugin. Call app.use(AbbyPlugin) to fix this error."
+ );
+ }
+
+ return data;
+ };
+
+ const useAbby = <
+ K extends keyof Tests,
+ TestVariant extends Tests[K]["variants"][number],
+ LookupValue,
+ const Lookup extends
+ | Record
+ | undefined = undefined,
+ >(
+ name: K,
+ lookupObject?: Lookup
+ ): {
+ variant: ComputedRef>;
+ onAct: () => void;
+ } => {
+ const data = useAbbyData();
+
+ // The server can't know which variant a user gets (it's stored in a cookie),
+ // so like the React integration the variant stays empty until the component
+ // is mounted. This avoids hydration mismatches.
+ const isMounted = shallowRef(false);
+ onMounted(() => {
+ isMounted.value = true;
+ });
+
+ const selectedVariant = computed(() =>
+ isMounted.value
+ ? (data.value.tests[name as unknown as TestName]?.selectedVariant ?? "")
+ : ""
+ );
+
+ // tell the server which variant was rendered, again whenever it changes
+ watch(selectedVariant, (variant) => {
+ if (!variant) return;
+
+ HttpService.sendData({
+ url: config.apiUrl,
+ type: AbbyEventType.PING,
+ data: {
+ projectId: config.projectId,
+ selectedVariant: variant,
+ testName: name as string,
+ },
+ });
+ });
+
+ const onAct = () => {
+ if (!selectedVariant.value) return;
+
+ HttpService.sendData({
+ url: config.apiUrl,
+ type: AbbyEventType.ACT,
+ data: {
+ projectId: config.projectId,
+ selectedVariant: selectedVariant.value,
+ testName: name as string,
+ },
+ });
+ };
+
+ const variant = computed(() =>
+ lookupObject
+ ? lookupObject[selectedVariant.value as TestVariant]
+ : selectedVariant.value
+ ) as ComputedRef>;
+
+ return {
+ variant,
+ /**
+ * This function can be called to indicate that something that
+ * uses the selected variant has been interacted with.
+ * It will automatically send the selected variant to the server.
+ */
+ onAct,
+ };
+ };
+
+ const useFeatureFlag = (name: FlagName): ComputedRef => {
+ const data = useAbbyData();
+ return computed(() => data.value.flags[name].value);
+ };
+
+ /**
+ * Returns an Array of all flags with their name and value
+ */
+ const useFeatureFlags = () => {
+ const data = useAbbyData();
+ return computed(() =>
+ (Object.keys(data.value.flags) as Array).map((flagName) => ({
+ name: flagName,
+ value: data.value.flags[flagName].value,
+ }))
+ );
+ };
+
+ const useRemoteConfig = <
+ T extends RemoteConfigName,
+ Config extends RemoteConfig[T],
+ >(
+ remoteConfigName: T
+ ): ComputedRef> => {
+ const data = useAbbyData();
+ return computed(
+ () =>
+ data.value.remoteConfig[remoteConfigName]
+ .value as RemoteConfigValueStringToType
+ );
+ };
+
+ /**
+ * Returns an Array of all remote config variables with their name and value
+ */
+ const useRemoteConfigVariables = () => {
+ const data = useAbbyData();
+ return computed(
+ () =>
+ (Object.keys(data.value.remoteConfig) as Array).map(
+ (configName) => ({
+ name: configName,
+ value: data.value.remoteConfig[configName].value,
+ })
+ ) as Array<{
+ name: RemoteConfigName;
+ value: RemoteConfigValueStringToType;
+ }>
+ );
+ };
+
+ /**
+ * Loads the project data from the Abby API, e.g. on the server to pass it
+ * as `initialData` to the plugin so the first render already has the right values
+ */
+ const loadInitialData = () =>
+ HttpService.getProjectData({
+ projectId: config.projectId,
+ environment: config.currentEnvironment as string,
+ url: config.apiUrl,
+ fetch: config.fetch,
+ __experimentalCdnUrl: config.__experimentalCdnUrl
+ ? `${config.__experimentalCdnUrl}/${config.projectId}/${config.currentEnvironment}`
+ : undefined,
+ });
+
+ const getFeatureFlagValue = (name: FlagName) => {
+ return abby.getFeatureFlag(name);
+ };
+
+ const getRemoteConfig = <
+ T extends RemoteConfigName,
+ Config extends RemoteConfig[T],
+ >(
+ remoteConfigName: T
+ ): RemoteConfigValueStringToType => {
+ return abby.getRemoteConfig(remoteConfigName);
+ };
+
+ const getABTestValue = <
+ TestName extends keyof Tests,
+ TestVariant extends Tests[TestName]["variants"][number],
+ LookupValue,
+ const Lookup extends
+ | Record
+ | undefined = undefined,
+ >(
+ testName: TestName,
+ lookupObject?: Lookup
+ ): ABTestReturnValue => {
+ const variant = abby.getTestVariant(testName);
+ // Typescript looses its typing here, so we cast as any in favor of having
+ // better type inference for the user
+ if (lookupObject === undefined) {
+ return variant as any;
+ }
+
+ return lookupObject[variant as TestVariant] as any;
+ };
+
+ /**
+ * Creates a component that renders the Abby devtools.
+ * They are only shown in development unless `dangerouslyForceShow` is set.
+ */
+ const withDevtools: withDevtoolsFunction = (factory, props) =>
+ defineComponent({
+ name: "AbbyDevtools",
+ setup() {
+ let destroy: (() => void) | undefined;
+
+ onMounted(() => {
+ if (
+ !props?.dangerouslyForceShow &&
+ process.env.NODE_ENV !== "development"
+ ) {
+ return;
+ }
+ destroy = factory.create({ ...props, abby });
+ });
+
+ onUnmounted(() => {
+ destroy?.();
+ });
+
+ return () => null;
+ },
+ });
+
+ /**
+ * Simple helper function create a function that resets an AB test
+ * @param name the name of the test
+ * @returns A function that can be called to reset the test
+ */
+ const getABResetFunction = (name: T) => {
+ return () => {
+ TestStorageService.remove(config.projectId, name as string);
+ };
+ };
+
+ /**
+ * Simple helper function to get a list of all variants for a given test
+ * @param name the name of the test
+ * @returns an array of all variants
+ */
+ const getVariants = (name: T) => {
+ return abby.getVariants(name);
+ };
+
+ const updateUserProperties = (
+ user: Partial<{
+ -readonly [K in keyof User]: Infer;
+ }>
+ ) => {
+ abby.updateUserProperties(user);
+ };
+
+ return {
+ AbbyPlugin,
+ useAbby,
+ useFeatureFlag,
+ useFeatureFlags,
+ useRemoteConfig,
+ useRemoteConfigVariables,
+ loadInitialData,
+ getFeatureFlagValue,
+ getRemoteConfig,
+ getABTestValue,
+ getABResetFunction,
+ getVariants,
+ updateUserProperties,
+ withDevtools,
+ __abby__: abby,
+ };
+}
diff --git a/packages/vue/src/index.ts b/packages/vue/src/index.ts
new file mode 100644
index 00000000..a62b597a
--- /dev/null
+++ b/packages/vue/src/index.ts
@@ -0,0 +1,7 @@
+export {
+ createAbby,
+ type ABTestReturnValue,
+ type AbbyPluginOptions,
+ type withDevtoolsFunction,
+} from "./createAbby";
+export { type ABConfig, type AbbyConfig, defineConfig } from "@tryabby/core";
diff --git a/packages/vue/tests/mocks/handlers.ts b/packages/vue/tests/mocks/handlers.ts
new file mode 100644
index 00000000..f2028cb7
--- /dev/null
+++ b/packages/vue/tests/mocks/handlers.ts
@@ -0,0 +1,42 @@
+import { ABBY_BASE_URL, type AbbyDataResponse } from "@tryabby/core";
+import { rest } from "msw";
+
+const returnData: AbbyDataResponse = {
+ tests: [
+ {
+ name: "test",
+ weights: [1, 1, 1, 1],
+ },
+ {
+ name: "test2",
+ weights: [1, 0],
+ },
+ ],
+ flags: [
+ {
+ name: "flag1",
+ value: true,
+ },
+ {
+ name: "flag2",
+ value: false,
+ },
+ ],
+ remoteConfig: [
+ {
+ name: "remoteConfig1",
+ value: "FooBar",
+ },
+ ],
+};
+export const handlers = [
+ rest.get(
+ `${ABBY_BASE_URL}api/dashboard/:projectId/data`,
+ (_req, res, ctx) => {
+ return res(ctx.json(returnData));
+ }
+ ),
+ rest.get(`${ABBY_BASE_URL}api/v2/data/:projectId`, (_req, res, ctx) => {
+ return res(ctx.json(returnData));
+ }),
+];
diff --git a/packages/vue/tests/mocks/server.ts b/packages/vue/tests/mocks/server.ts
new file mode 100644
index 00000000..9bb8a870
--- /dev/null
+++ b/packages/vue/tests/mocks/server.ts
@@ -0,0 +1,5 @@
+import { setupServer } from "msw/node";
+import { handlers } from "./handlers";
+
+// This configures a request mocking server with the given request handlers.
+export const server = setupServer(...handlers);
diff --git a/packages/vue/tests/setup.ts b/packages/vue/tests/setup.ts
new file mode 100644
index 00000000..0066b826
--- /dev/null
+++ b/packages/vue/tests/setup.ts
@@ -0,0 +1,30 @@
+import { enableAutoUnmount } from "@vue/test-utils";
+import fetch from "node-fetch";
+import { afterAll, afterEach, beforeAll } from "vitest";
+import { server } from "./mocks/server";
+
+/// @ts-ignore
+global.fetch = fetch;
+
+// Establish API mocking before all tests.
+beforeAll(() => server.listen());
+
+// Clean up after the tests are finished.
+afterAll(() => server.close());
+
+// unmount every mounted app, which also runs the plugin's cleanup
+enableAutoUnmount(afterEach);
+
+afterEach(() => {
+ // Reset any request handlers that we may add during the tests,
+ // so they don't affect other tests.
+ server.resetHandlers();
+ vi.restoreAllMocks();
+ // remove all cookies so tests don't share stored variants
+ if (typeof document === "undefined") return;
+ for (const cookie of document.cookie.split(";")) {
+ const name = cookie.split("=")[0]?.trim();
+ if (name)
+ document.cookie = `${name}=; expires=Thu, 01 Jan 1970 00:00:00 GMT`;
+ }
+});
diff --git a/packages/vue/tests/ssr.test.ts b/packages/vue/tests/ssr.test.ts
new file mode 100644
index 00000000..acdaa1c2
--- /dev/null
+++ b/packages/vue/tests/ssr.test.ts
@@ -0,0 +1,71 @@
+// @vitest-environment node
+
+import { HttpService } from "@tryabby/core";
+import { renderToString } from "@vue/server-renderer";
+import { createSSRApp, defineComponent, h } from "vue";
+import { createAbby } from "../src";
+import { initialData } from "./utils";
+
+const createTestAbby = () =>
+ createAbby({
+ projectId: "123",
+ environments: [""],
+ currentEnvironment: "",
+ tests: { test: { variants: ["A", "B", "C"] } },
+ flags: ["flag1", "flag2"],
+ remoteConfig: { text: "String" },
+ });
+
+describe("server side rendering", () => {
+ it("renders flags and remote config but no variant", async () => {
+ const { AbbyPlugin, useAbby, useFeatureFlag, useRemoteConfig } =
+ createTestAbby();
+
+ const app = createSSRApp(
+ defineComponent({
+ setup() {
+ const { variant } = useAbby("test");
+ const flag1 = useFeatureFlag("flag1");
+ const text = useRemoteConfig("text");
+ return () =>
+ h("div", [
+ h("span", { id: "variant" }, variant.value),
+ h("span", { id: "flag" }, String(flag1.value)),
+ h("span", { id: "text" }, text.value),
+ ]);
+ },
+ })
+ ).use(AbbyPlugin, { initialData });
+
+ const html = await renderToString(app);
+
+ // the server doesn't know the user's variant, it's selected after hydration
+ expect(html).toContain('true ');
+ expect(html).toContain('Hello ');
+ });
+
+ it("doesn't subscribe, load data or send events on the server", async () => {
+ const { AbbyPlugin, useAbby, __abby__ } = createTestAbby();
+ const subscribeSpy = vi.spyOn(__abby__, "subscribe");
+ const loadSpy = vi.spyOn(__abby__, "loadProjectData");
+ const sendSpy = vi.spyOn(HttpService, "sendData");
+
+ for (const options of [{ initialData }, undefined]) {
+ const app = createSSRApp(
+ defineComponent({
+ setup() {
+ const { variant } = useAbby("test");
+ return () => h("p", variant.value);
+ },
+ })
+ ).use(AbbyPlugin, options);
+
+ await renderToString(app);
+ }
+
+ expect(subscribeSpy).not.toHaveBeenCalled();
+ expect(loadSpy).not.toHaveBeenCalled();
+ expect(sendSpy).not.toHaveBeenCalled();
+ });
+});
diff --git a/packages/vue/tests/types.test-d.ts b/packages/vue/tests/types.test-d.ts
new file mode 100644
index 00000000..e37fb840
--- /dev/null
+++ b/packages/vue/tests/types.test-d.ts
@@ -0,0 +1,97 @@
+import type { AbbyDataResponse } from "@tryabby/core";
+import { type ComputedRef, createApp } from "vue";
+import { createAbby } from "../src";
+
+const { AbbyPlugin, useAbby, useFeatureFlag, useRemoteConfig, ...abby } =
+ createAbby({
+ projectId: "123",
+ environments: ["production"],
+ currentEnvironment: "production",
+ tests: {
+ test: { variants: ["ONLY_ONE_VARIANT"] },
+ test2: { variants: ["A", "B"] },
+ },
+ flags: ["flag1"],
+ remoteConfig: {
+ text: "String",
+ count: "Number",
+ json: "JSON",
+ },
+ });
+
+describe("useAbby", () => {
+ it("returns the variants as a computed ref", () => {
+ expectTypeOf(useAbby("test").variant).toEqualTypeOf<
+ ComputedRef<"ONLY_ONE_VARIANT">
+ >();
+ expectTypeOf(useAbby("test2").variant).toEqualTypeOf<
+ ComputedRef<"A" | "B">
+ >();
+ expectTypeOf(useAbby("test").onAct).toEqualTypeOf<() => void>();
+ });
+
+ it("uses the types of the lookup object", () => {
+ expectTypeOf(useAbby("test2", { A: 1, B: 2 }).variant).toEqualTypeOf<
+ ComputedRef<1 | 2>
+ >();
+ });
+
+ it("rejects unknown tests and incomplete lookup objects", () => {
+ // @ts-expect-error unknown test
+ useAbby("unknown");
+ // @ts-expect-error variant B is missing
+ useAbby("test2", { A: 1 });
+ });
+});
+
+describe("useFeatureFlag", () => {
+ it("returns a boolean computed ref", () => {
+ expectTypeOf(useFeatureFlag("flag1")).toEqualTypeOf>();
+ });
+
+ it("rejects unknown flags", () => {
+ // @ts-expect-error unknown flag
+ useFeatureFlag("unknown");
+ });
+});
+
+describe("useRemoteConfig", () => {
+ it("infers the type from the config", () => {
+ expectTypeOf(useRemoteConfig("text")).toEqualTypeOf>();
+ expectTypeOf(useRemoteConfig("count")).toEqualTypeOf>();
+ expectTypeOf(useRemoteConfig("json")).toEqualTypeOf<
+ ComputedRef>
+ >();
+ });
+
+ it("rejects unknown remote config", () => {
+ // @ts-expect-error unknown remote config
+ useRemoteConfig("unknown");
+ });
+});
+
+describe("helpers", () => {
+ it("are typed like the composables", () => {
+ expectTypeOf(abby.getFeatureFlagValue("flag1")).toEqualTypeOf();
+ expectTypeOf(abby.getRemoteConfig("count")).toEqualTypeOf();
+ expectTypeOf(abby.getABTestValue("test2")).toEqualTypeOf<"A" | "B">();
+ expectTypeOf(
+ abby.getABTestValue("test2", { A: "a", B: "b" })
+ ).toEqualTypeOf<"a" | "b">();
+ expectTypeOf(abby.useFeatureFlags().value).toEqualTypeOf<
+ Array<{ name: "flag1"; value: boolean }>
+ >();
+ // @ts-expect-error unknown flag
+ abby.getFeatureFlagValue("unknown");
+ });
+});
+
+describe("AbbyPlugin", () => {
+ it("can be installed with and without initial data", () => {
+ const initialData = {} as AbbyDataResponse;
+ createApp({}).use(AbbyPlugin);
+ createApp({}).use(AbbyPlugin, { initialData });
+ // @ts-expect-error wrong option type
+ createApp({}).use(AbbyPlugin, { initialData: "nope" });
+ });
+});
diff --git a/packages/vue/tests/useAbby.test.ts b/packages/vue/tests/useAbby.test.ts
new file mode 100644
index 00000000..60f8c972
--- /dev/null
+++ b/packages/vue/tests/useAbby.test.ts
@@ -0,0 +1,462 @@
+import {
+ ABBY_BASE_URL,
+ AbbyEventType,
+ HttpService,
+ getABStorageKey,
+ getFFStorageKey,
+} from "@tryabby/core";
+import { mount } from "@vue/test-utils";
+import { rest } from "msw";
+import { defineComponent, h, nextTick, watch } from "vue";
+import { createAbby } from "../src";
+import { server } from "./mocks/server";
+import { initialData, setStoredVariant, withSetup } from "./utils";
+
+const OLD_ENV = process.env;
+
+beforeEach(() => {
+ process.env = { ...OLD_ENV };
+});
+
+afterAll(() => {
+ process.env = OLD_ENV;
+});
+
+const createTestAbby = () =>
+ createAbby({
+ projectId: "123",
+ environments: [""],
+ currentEnvironment: "",
+ tests: { test: { variants: ["A", "B", "C"] } },
+ flags: ["flag1", "flag2"],
+ remoteConfig: { text: "String", count: "Number" },
+ });
+
+describe("useAbby", () => {
+ it("returns one of the variants once mounted", () => {
+ const { AbbyPlugin, useAbby } = createTestAbby();
+
+ const { result } = withSetup(() => useAbby("test"), AbbyPlugin, {
+ initialData,
+ });
+
+ expect(["A", "B", "C"]).toContain(result.variant.value);
+ });
+
+ it("uses the stored variant", () => {
+ setStoredVariant("123", "test", "B");
+ const { AbbyPlugin, useAbby } = createTestAbby();
+
+ const { result } = withSetup(() => useAbby("test"), AbbyPlugin, {
+ initialData,
+ });
+
+ expect(result.variant.value).toBe("B");
+ });
+
+ it("looks up the selected variant in the lookup object", () => {
+ setStoredVariant("123", "test", "C");
+ const { AbbyPlugin, useAbby } = createTestAbby();
+
+ const { result } = withSetup(
+ () => useAbby("test", { A: "red", B: "green", C: "blue" }),
+ AbbyPlugin,
+ { initialData }
+ );
+
+ expect(result.variant.value).toBe("blue");
+ });
+
+ it("renders the variant in a component", async () => {
+ setStoredVariant("123", "test", "A");
+ const { AbbyPlugin, useAbby } = createTestAbby();
+
+ const wrapper = mount(
+ defineComponent({
+ setup() {
+ const { variant } = useAbby("test");
+ return () => h("p", variant.value);
+ },
+ }),
+ { global: { plugins: [[AbbyPlugin, { initialData }]] } }
+ );
+ await nextTick();
+
+ expect(wrapper.text()).toBe("A");
+ });
+
+ it("pings the server with the selected variant after mount", async () => {
+ setStoredVariant("123", "test", "B");
+ const spy = vi
+ .spyOn(HttpService, "sendData")
+ .mockImplementation(() => undefined);
+ const { AbbyPlugin, useAbby } = createTestAbby();
+
+ withSetup(() => useAbby("test"), AbbyPlugin, { initialData });
+ await nextTick();
+
+ expect(spy).toHaveBeenCalledTimes(1);
+ expect(spy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: AbbyEventType.PING,
+ data: { projectId: "123", selectedVariant: "B", testName: "test" },
+ })
+ );
+ });
+
+ it("notifies the server with onAct", async () => {
+ setStoredVariant("123", "test", "C");
+ const spy = vi
+ .spyOn(HttpService, "sendData")
+ .mockImplementation(() => undefined);
+ const { AbbyPlugin, useAbby } = createTestAbby();
+
+ const { result } = withSetup(() => useAbby("test"), AbbyPlugin, {
+ initialData,
+ });
+ result.onAct();
+
+ expect(spy).toHaveBeenCalledWith(
+ expect.objectContaining({
+ type: AbbyEventType.ACT,
+ data: { projectId: "123", selectedVariant: "C", testName: "test" },
+ })
+ );
+ });
+
+ it("updates the variant and pings again when it changes", async () => {
+ setStoredVariant("123", "test", "A");
+ const spy = vi
+ .spyOn(HttpService, "sendData")
+ .mockImplementation(() => undefined);
+ const { AbbyPlugin, useAbby, __abby__ } = createTestAbby();
+
+ const { result } = withSetup(() => useAbby("test"), AbbyPlugin, {
+ initialData,
+ });
+ await nextTick();
+
+ // this is what the devtools do
+ __abby__.updateLocalVariant("test", "C");
+ await nextTick();
+
+ expect(result.variant.value).toBe("C");
+ expect(spy).toHaveBeenLastCalledWith(
+ expect.objectContaining({
+ type: AbbyEventType.PING,
+ data: { projectId: "123", selectedVariant: "C", testName: "test" },
+ })
+ );
+ });
+
+ it("uses the weights from the API for new visitors", async () => {
+ // a random value close to 1 picks the last variant when all weights are equal
+ vi.spyOn(window.crypto, "getRandomValues").mockImplementation((array) => {
+ (array as Uint32Array)[0] = 0xffffffff;
+ return array;
+ });
+ const { AbbyPlugin, useAbby } = createAbby({
+ projectId: "123",
+ environments: [""],
+ currentEnvironment: "",
+ tests: { test2: { variants: ["A", "B"] } },
+ });
+
+ // the mocked API gives B a weight of 0
+ const { result } = withSetup(() => useAbby("test2"), AbbyPlugin);
+ expect(result.variant.value).toBe("");
+
+ await vi.waitFor(() => expect(result.variant.value).not.toBe(""));
+ expect(result.variant.value).toBe("A");
+ expect(document.cookie).toContain(`${getABStorageKey("123", "test2")}=A`);
+ });
+
+ it("still selects a variant if the data can't be loaded", async () => {
+ server.use(
+ rest.get(`${ABBY_BASE_URL}api/v2/data/:projectId`, (_req, res, ctx) =>
+ res(ctx.status(500))
+ )
+ );
+ const { AbbyPlugin, useAbby } = createTestAbby();
+
+ const { result } = withSetup(() => useAbby("test"), AbbyPlugin);
+
+ await vi.waitFor(() =>
+ expect(["A", "B", "C"]).toContain(result.variant.value)
+ );
+ });
+
+ it("throws a helpful error without the plugin", () => {
+ const { useAbby } = createTestAbby();
+
+ expect(() => useAbby("test")).toThrowError(/app\.use\(AbbyPlugin\)/);
+ expect(() =>
+ mount(
+ defineComponent({
+ setup() {
+ useAbby("test");
+ return () => null;
+ },
+ })
+ )
+ ).toThrowError(/app\.use\(AbbyPlugin\)/);
+ });
+});
+
+describe("useFeatureFlag", () => {
+ it("returns the flag values", () => {
+ const { AbbyPlugin, useFeatureFlag } = createTestAbby();
+
+ const { result } = withSetup(
+ () => ({
+ flag1: useFeatureFlag("flag1"),
+ flag2: useFeatureFlag("flag2"),
+ }),
+ AbbyPlugin,
+ { initialData }
+ );
+
+ expect(result.flag1.value).toBe(true);
+ expect(result.flag2.value).toBe(false);
+ });
+
+ it("loads the data from the API without initialData", async () => {
+ const { AbbyPlugin, useFeatureFlag } = createTestAbby();
+
+ const { result } = withSetup(() => useFeatureFlag("flag1"), AbbyPlugin);
+ expect(result.value).toBe(false);
+
+ await vi.waitFor(() => expect(result.value).toBe(true));
+ });
+
+ it("uses the devOverrides in development", () => {
+ process.env.NODE_ENV = "development";
+ const { AbbyPlugin, useFeatureFlag } = createAbby({
+ projectId: "123",
+ environments: [""],
+ currentEnvironment: "",
+ flags: ["flag1"],
+ settings: { flags: { devOverrides: { flag1: false } } },
+ });
+
+ const { result } = withSetup(() => useFeatureFlag("flag1"), AbbyPlugin, {
+ initialData,
+ });
+
+ expect(result.value).toBe(false);
+ });
+
+ it("re-renders when a flag changes", async () => {
+ const { AbbyPlugin, useFeatureFlag, __abby__ } = createTestAbby();
+
+ const wrapper = mount(
+ defineComponent({
+ setup() {
+ const flag1 = useFeatureFlag("flag1");
+ return () => h("p", flag1.value ? "on" : "off");
+ },
+ }),
+ { global: { plugins: [[AbbyPlugin, { initialData }]] } }
+ );
+ expect(wrapper.text()).toBe("on");
+
+ // this is what the devtools do
+ __abby__.updateFlag("flag1", false);
+ await nextTick();
+
+ expect(wrapper.text()).toBe("off");
+ });
+
+ it("returns all flags with useFeatureFlags", async () => {
+ const { AbbyPlugin, useFeatureFlags, __abby__ } = createTestAbby();
+
+ const { result } = withSetup(() => useFeatureFlags(), AbbyPlugin, {
+ initialData,
+ });
+
+ expect(result.value).toEqual([
+ { name: "flag1", value: true },
+ { name: "flag2", value: false },
+ ]);
+
+ __abby__.updateFlag("flag2", true);
+ await nextTick();
+
+ expect(result.value).toEqual([
+ { name: "flag1", value: true },
+ { name: "flag2", value: true },
+ ]);
+ });
+});
+
+describe("useRemoteConfig", () => {
+ it("returns the remote config values", () => {
+ const { AbbyPlugin, useRemoteConfig } = createTestAbby();
+
+ const { result } = withSetup(
+ () => ({
+ text: useRemoteConfig("text"),
+ count: useRemoteConfig("count"),
+ }),
+ AbbyPlugin,
+ { initialData }
+ );
+
+ expect(result.text.value).toBe("Hello");
+ expect(result.count.value).toBe(42);
+ });
+
+ it("uses the default values until the data is loaded", () => {
+ const { AbbyPlugin, useRemoteConfig } = createAbby({
+ projectId: "123",
+ environments: [""],
+ currentEnvironment: "",
+ remoteConfig: { text: "String" },
+ settings: { remoteConfig: { defaultValues: { String: "Default" } } },
+ });
+
+ const { result } = withSetup(() => useRemoteConfig("text"), AbbyPlugin);
+
+ expect(result.value).toBe("Default");
+ });
+
+ it("uses the devOverrides in development", () => {
+ process.env.NODE_ENV = "development";
+ const { AbbyPlugin, useRemoteConfig } = createAbby({
+ projectId: "123",
+ environments: [""],
+ currentEnvironment: "",
+ remoteConfig: { text: "String" },
+ settings: { remoteConfig: { devOverrides: { text: "Overridden" } } },
+ });
+
+ const { result } = withSetup(() => useRemoteConfig("text"), AbbyPlugin, {
+ initialData,
+ });
+
+ expect(result.value).toBe("Overridden");
+ });
+
+ it("updates when a value changes", async () => {
+ const { AbbyPlugin, useRemoteConfig, __abby__ } = createTestAbby();
+
+ const { result } = withSetup(() => useRemoteConfig("text"), AbbyPlugin, {
+ initialData,
+ });
+
+ __abby__.updateRemoteConfig("text", "Changed");
+ await nextTick();
+
+ expect(result.value).toBe("Changed");
+ });
+
+ it("returns all variables with useRemoteConfigVariables", () => {
+ const { AbbyPlugin, useRemoteConfigVariables } = createTestAbby();
+
+ const { result } = withSetup(() => useRemoteConfigVariables(), AbbyPlugin, {
+ initialData,
+ });
+
+ expect(result.value).toEqual([
+ { name: "text", value: "Hello" },
+ { name: "count", value: 42 },
+ ]);
+ });
+});
+
+describe("AbbyPlugin", () => {
+ it("unsubscribes from the core when the app is unmounted", () => {
+ const { AbbyPlugin, useFeatureFlag, __abby__ } = createTestAbby();
+ const unsubscribe = vi.fn();
+ vi.spyOn(__abby__, "subscribe").mockReturnValue(unsubscribe);
+
+ const { wrapper } = withSetup(() => useFeatureFlag("flag1"), AbbyPlugin, {
+ initialData,
+ });
+ expect(__abby__.subscribe).toHaveBeenCalledTimes(1);
+
+ wrapper.unmount();
+
+ expect(unsubscribe).toHaveBeenCalledTimes(1);
+ });
+
+ it("applies the cookie overrides once the data is loaded", async () => {
+ // the API returns `true` for flag1, the override (e.g. from the devtools) says `false`
+ document.cookie = `${getFFStorageKey("123", "flag1")}=false`;
+ const { AbbyPlugin, useFeatureFlag, __abby__ } = createTestAbby();
+ const loadSpy = vi.spyOn(__abby__, "loadProjectData");
+
+ const { result } = withSetup(() => {
+ const flag1 = useFeatureFlag("flag1");
+ // a sync watcher reads the value at the moment the core notifies,
+ // which is before the overrides are applied
+ watch(flag1, () => {}, { flush: "sync" });
+ return flag1;
+ }, AbbyPlugin);
+ await vi.waitFor(() => expect(loadSpy).toHaveBeenCalledTimes(1));
+ await loadSpy.mock.results[0]?.value;
+
+ expect(result.value).toBe(false);
+ });
+});
+
+describe("helpers", () => {
+ it("returns the values without a component", () => {
+ const {
+ __abby__,
+ getFeatureFlagValue,
+ getRemoteConfig,
+ getABTestValue,
+ getVariants,
+ } = createTestAbby();
+ __abby__.init(initialData);
+
+ expect(getFeatureFlagValue("flag1")).toBe(true);
+ expect(getRemoteConfig("text")).toBe("Hello");
+ expect(getVariants("test")).toEqual(["A", "B", "C"]);
+ expect(["A", "B", "C"]).toContain(getABTestValue("test"));
+ expect(["a", "b", "c"]).toContain(
+ getABTestValue("test", { A: "a", B: "b", C: "c" })
+ );
+ });
+
+ it("resets a test with getABResetFunction", () => {
+ setStoredVariant("123", "test", "B");
+ const { getABResetFunction } = createTestAbby();
+
+ getABResetFunction("test")();
+
+ expect(document.cookie).not.toContain("_test=B");
+ });
+});
+
+describe("withDevtools", () => {
+ const createFactory = () => {
+ const destroy = vi.fn();
+ const factory = { create: vi.fn(() => destroy) };
+ return { factory, destroy };
+ };
+
+ it("creates the devtools on mount and destroys them on unmount", () => {
+ const { withDevtools } = createTestAbby();
+ const { factory, destroy } = createFactory();
+
+ const wrapper = mount(
+ withDevtools(factory as any, { dangerouslyForceShow: true })
+ );
+ expect(factory.create).toHaveBeenCalledTimes(1);
+
+ wrapper.unmount();
+ expect(destroy).toHaveBeenCalledTimes(1);
+ });
+
+ it("does not show the devtools outside of development", () => {
+ process.env.NODE_ENV = "production";
+ const { withDevtools } = createTestAbby();
+ const { factory } = createFactory();
+
+ mount(withDevtools(factory as any));
+
+ expect(factory.create).not.toHaveBeenCalled();
+ });
+});
diff --git a/packages/vue/tests/utils.ts b/packages/vue/tests/utils.ts
new file mode 100644
index 00000000..5bee329d
--- /dev/null
+++ b/packages/vue/tests/utils.ts
@@ -0,0 +1,47 @@
+import { type AbbyDataResponse, getABStorageKey } from "@tryabby/core";
+import { mount } from "@vue/test-utils";
+import { type Plugin, defineComponent } from "vue";
+
+export const initialData: AbbyDataResponse = {
+ tests: [{ name: "test", weights: [1, 0, 0] }],
+ flags: [
+ { name: "flag1", value: true },
+ { name: "flag2", value: false },
+ ],
+ remoteConfig: [
+ { name: "text", value: "Hello" },
+ { name: "count", value: 42 },
+ ],
+};
+
+/**
+ * Runs a composable inside the setup of a component that is mounted
+ * in an app with the given plugin installed.
+ */
+export function withSetup(
+ composable: () => T,
+ plugin: Plugin<[options?: { initialData?: AbbyDataResponse }]>,
+ options?: { initialData?: AbbyDataResponse }
+) {
+ let result!: T;
+
+ const wrapper = mount(
+ defineComponent({
+ setup() {
+ result = composable();
+ return () => null;
+ },
+ }),
+ { global: { plugins: [[plugin, options]] } }
+ );
+
+ return { result, wrapper };
+}
+
+export function setStoredVariant(
+ projectId: string,
+ testName: string,
+ variant: string
+) {
+ document.cookie = `${getABStorageKey(projectId, testName)}=${variant}`;
+}
diff --git a/packages/vue/tsconfig.json b/packages/vue/tsconfig.json
new file mode 100644
index 00000000..7015f100
--- /dev/null
+++ b/packages/vue/tsconfig.json
@@ -0,0 +1,11 @@
+{
+ "extends": "tsconfig/base.json",
+ "compilerOptions": {
+ "lib": ["ESNext", "DOM"],
+ "module": "ESNext",
+ "moduleResolution": "bundler",
+ "target": "es6",
+ "types": ["vitest/globals"]
+ },
+ "include": ["src", "tests"]
+}
diff --git a/packages/vue/tsup.config.ts b/packages/vue/tsup.config.ts
new file mode 100644
index 00000000..bf89044f
--- /dev/null
+++ b/packages/vue/tsup.config.ts
@@ -0,0 +1,9 @@
+import { defineConfig } from "tsup";
+
+export default defineConfig({
+ dts: true,
+ clean: true,
+ format: ["cjs", "esm"],
+ sourcemap: true,
+ treeshake: true,
+});
diff --git a/packages/vue/vite.config.ts b/packages/vue/vite.config.ts
new file mode 100644
index 00000000..c5e5a986
--- /dev/null
+++ b/packages/vue/vite.config.ts
@@ -0,0 +1,13 @@
+///