Vue SDK API Reference

// main.ts
import { createApp } from 'vue'
import { createSupaship } from '@supashiphq/vue-sdk'
 
const supaship = createSupaship(options)
 
const app = createApp(App)
app.use(supaship)
app.mount('#app')

import { FeaturesWithFallbacks } from '@supashiphq/vue-sdk'
 
const config = {
  apiKey: 'your-api-key',
  environment: 'production',
  features: {
    // Required: define all feature flags with fallback values
    'my-feature': false,
    config: { theme: 'light' },
  } satisfies FeaturesWithFallbacks,
  context: {
    // Optional: targeting context
    userID: 'user-123',
    email: '[email protected]',
    plan: 'premium',
  },
  networkConfig: {
    // Optional: network settings
    featuresAPIUrl: 'https://api.supashiphq.com/features',
    retry: {
      enabled: true,
      maxAttempts: 3,
      backoff: 1000,
    },
    requestTimeoutMs: 5000,
  },
}

const result = useFeature(featureName, options?)

{
  feature: ComputedRef<T>,      // The feature value (typed based on your Features interface)
  isLoading: ComputedRef<boolean>,  // Loading state
  isSuccess: ComputedRef<boolean>,  // Success state
  isError: ComputedRef<boolean>,    // Error state
  error: Ref<Error | null>,         // Error object if failed
  status: Ref<'idle' | 'loading' | 'success' | 'error'>,
  refetch: () => Promise<void>,     // Function to manually refetch
  // ... other query state properties
}

<script setup lang="ts">
import { useFeature } from '@supashiphq/vue-sdk'
 
// Simple boolean feature
const { feature: isEnabled, isLoading } = useFeature('new-ui')
</script>
 
<template>
  <Skeleton v-if="isLoading" />
  <NewUI v-else-if="isEnabled" />
  <OldUI v-else />
</template>

<script setup lang="ts">
import { useFeature } from '@supashiphq/vue-sdk'
 
// Object feature
const { feature: config } = useFeature('theme-config')
</script>
 
<template>
  <div v-if="config" :class="config.theme">
    <Logo v-if="config.showLogo" />
    <div :style="{ color: config.primaryColor }">Content</div>
  </div>
</template>

<script setup lang="ts">
import { computed } from 'vue'
import { useFeature } from '@supashiphq/vue-sdk'
import { useUser } from './composables/user'
 
const { user, isLoading: userLoading } = useUser()
 
// Only fetch when user is loaded
const { feature } = useFeature('user-specific-feature', {
  context: computed(() => ({ userId: user.value?.id })),
  shouldFetch: computed(() => !userLoading.value && !!user.value),
})
</script>
 
<template>
  <SpecialContent v-if="feature" />
</template>

const result = useFeatures(featureNames, options?)

{
  features: ComputedRef<{ [key: string]: T }>, // Object with feature values (typed based on keys)
  isLoading: ComputedRef<boolean>,
  isSuccess: ComputedRef<boolean>,
  isError: ComputedRef<boolean>,
  error: Ref<Error | null>,
  status: Ref<'idle' | 'loading' | 'success' | 'error'>,
  refetch: () => Promise<void>,
  // ... other query state properties
}

<script setup lang="ts">
import { computed } from 'vue'
import { useFeatures } from '@supashiphq/vue-sdk'
import { useUser } from './composables/user'
 
const { user } = useUser()
 
// Fetch multiple features at once (more efficient than multiple useFeature calls)
const { features, isLoading } = useFeatures(
  ['new-dashboard', 'beta-mode', 'show-sidebar'],
  {
    context: computed(() => ({
      userId: user.value?.id,
      plan: user.value?.plan,
    })),
  },
)
</script>
 
<template>
  <LoadingSpinner v-if="isLoading" />
  <div v-else :class="features['new-dashboard'] ? 'new-layout' : 'old-layout'">
    <Sidebar v-if="features['show-sidebar']" />
    <BetaBadge v-if="features['beta-mode']" />
    <MainContent />
  </div>
</template>

<script setup lang="ts">
import { useFeatures } from '@supashiphq/vue-sdk'
 
// TypeScript will infer the correct types for each feature
const { features } = useFeatures(['feature-a', 'feature-b', 'config-feature'])
</script>
 
<template>
  <div>
    <FeatureA v-if="features['feature-a']" />
    <FeatureB v-if="features['feature-b']" />
    <ConfigDisplay v-if="features['config-feature']" :config="features['config-feature']" />
  </div>
</template>

const { updateContext, getContext } = useFeatureContext()

<script setup lang="ts">
import { ref, watch } from 'vue'
import { useFeatureContext } from '@supashiphq/vue-sdk'
 
const { updateContext } = useFeatureContext()
const user = ref(null)
 
const handleUserUpdate = newUser => {
  user.value = newUser
 
  // Update feature context when user changes
  // This will trigger refetch of all features
  updateContext({
    userId: newUser.id,
    plan: newUser.subscriptionPlan,
    segment: newUser.segment,
  })
}
</script>
 
<template>
  <form @submit="handleUserUpdate">
    <!-- User profile form -->
  </form>
</template>

const client = useClient()
 
// Use client methods directly
const feature = await client.getFeature('my-feature', { context: { ... } })
const features = await client.getFeatures(['feature-1', 'feature-2'])