> For the complete documentation index, see [llms.txt](https://docs.winga.me/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://docs.winga.me/integrations/vue.md).

# Vue

There is no dedicated `@winga/vue` SDK. Use the [Evaluation API](/api-reference/evaluation-api.md) directly. A small composable that loads the flag map once and exposes a reactive `isEnabled` is usually enough.

```typescript
// composables/useWinga.ts
import { ref } from 'vue'

const flags = ref<Record<string, { enabled: boolean; value?: unknown }>>({})

export async function loadFlags(apiKey: string, environment: string): Promise<void> {
  const res = await fetch(`https://api.winga.me/v1/flags?env=${environment}`, {
    headers: { 'X-Winga-Key': apiKey },
  })
  if (res.ok) {
    const data = await res.json()
    flags.value = data.flags ?? {}
  }
}

export function isEnabled(key: string): boolean {
  return flags.value[key]?.enabled ?? false
}
```

```typescript
// main.ts — load once at startup
await loadFlags('proj_live_xxx', 'production')
```

```vue
<script setup lang="ts">
import { isEnabled } from '@/composables/useWinga'
</script>

<template>
  <NewCheckout v-if="isEnabled('new-checkout')" />
  <LegacyCheckout v-else />
</template>
```

For live updates, subscribe to `GET /v1/stream?env=<environment>` with an `EventSource` and reassign `flags.value` on each frame.