FeatureSignals

Vue SDK

Composables for evaluating feature flags in Vue 3 applications using the Composition API.

Installation

bash
npm install @featuresignals/vue

Requirements: Vue 3.3+

Quick Start

typescript
// main.ts
import { createApp } from "vue";
import { FeatureSignalsPlugin } from "@featuresignals/vue";
import App from "./App.vue";

const app = createApp(App);
app.use(FeatureSignalsPlugin, {
  sdkKey: "fs_cli_your_api_key",
  envKey: "production",
});
app.mount("#app");

Composables

html
<script setup lang="ts">
import { useFlag, useReady } from "@featuresignals/vue";

const showCheckout = useFlag("new-checkout", false);
const ready = useReady();
</script>

<template>
  <LoadingSpinner v-if="!ready" />
  <NewCheckout v-else-if="showCheckout" />
  <OldCheckout v-else />
</template>

Feature Gate Component

html
<!-- FeatureGate.vue -->
<script setup lang="ts">
import { useFlag } from "@featuresignals/vue";
const props = defineProps<{ flagKey: string }>();
const enabled = useFlag(props.flagKey, false);
</script>

<template>
  <slot v-if="enabled" />
  <slot v-else name="fallback" />
</template>

Next Steps