Vue.js Feature Flags

Quick Start

1. Get your API key

Sign up at flagbit.anethoth.com to get your SDK key. The free tier includes 1,000 evaluations/day.

2. Install (optional)

npm install flagbit-vue

3. Evaluate flags

// composables/useFeatureFlag.js
import { ref, onMounted } from 'vue';

export function useFeatureFlag(flagKey, defaultValue = false) {
  const enabled = ref(defaultValue);
  const loading = ref(true);

  onMounted(async () => {
    try {
      const res = await fetch(
        'https://flagbit.anethoth.com/api/v1/evaluate', {
        method: 'POST',
        headers: {
          'Content-Type': 'application/json',
          'X-SDK-Key': import.meta.env.VITE_FLAGBIT_SDK_KEY
        },
        body: JSON.stringify({
          flag_key: flagKey,
          context: { user_id: getCurrentUserId() }
        })
      });
      const data = await res.json();
      enabled.value = data.value;
    } catch {
      enabled.value = defaultValue;
    } finally {
      loading.value = false;
    }
  });

  return { enabled, loading };
}

// Component usage
<script setup>
import { useFeatureFlag } from '@/composables/useFeatureFlag';

const { enabled: showNewNav, loading } = useFeatureFlag('new-navigation');
</script>

<template>
  <NewNavigation v-if="showNewNav" />
  <LegacyNavigation v-else />

  <!-- Or use v-show for instant switching -->
  <PromoBanner v-show="showNewNav" />
</template>

// Vue directive for inline feature gating
// main.js
app.directive('feature', {
  async mounted(el, binding) {
    const res = await fetch('https://flagbit.anethoth.com/api/v1/evaluate', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json', 'X-SDK-Key': SDK_KEY },
      body: JSON.stringify({ flag_key: binding.value })
    });
    const { value } = await res.json();
    if (!value) el.style.display = 'none';
  }
});

// Usage: <div v-feature="'beta-section'">Beta content</div>

Use Cases for Vue.js

Component Variants

Show different component versions to different users — test new designs without risk.

Nuxt SSR

Evaluate flags server-side in Nuxt's setup hook for flicker-free rendering.

Pinia Store Gating

Control which store actions are available based on feature flags.

Route Guards

Use Vue Router beforeEach to gate routes behind feature flags.

How FlagBit Works

1

Create a Flag

Define flags in your FlagBit dashboard with targeting rules and rollout percentages.

2

Evaluate in Code

Call the evaluate endpoint from your Vue.js app with user context for targeted rollouts.

3

Toggle Instantly

Enable, disable, or adjust rollouts in real-time. No redeployment needed.

FAQ

Yes — use the composable in setup() or evaluate flags in server middleware for SSR.

Evaluate flags before mount or use Suspense to show a loading state while flags resolve.

Yes — call FlagBit from Pinia actions or getters. Cache results in the store.

Yes — provide a global $flag method via app.provide and inject it in any component.

More Framework Guides

React Feature Flags

React

Next.js Feature Flags

Next.js

Python Feature Flags

Python

Node.js Feature Flags

Node.js

Go Feature Flags

Go

Ruby Feature Flags

Ruby on Rails

View all guides →