> For clean Markdown of any page, append .md to the page URL.
> For a complete documentation index, see https://docs.getunleash.io/sdks/vue/llms.txt.
> For AI client integration (Claude Code, Cursor, etc.), connect to the MCP server at https://docs.getunleash.io/_mcp/server.

# Vue SDK

> Set up the Unleash Vue SDK to evaluate feature flags in Vue.js apps with context updates, variants, deferred start, and toolbar support.

The Unleash Vue SDK lets you evaluate feature flags in Vue applications. It connects to Unleash or [Unleash Edge](/unleash-edge) to fetch evaluated flags for a given [Unleash context](/concepts/unleash-context).

You can use this SDK with [Unleash Enterprise](https://www.getunleash.io/pricing) or [Unleash Open Source](https://github.com/Unleash/unleash).

For an overview of how Unleash SDKs work, including offline behavior, feature compatibility across SDKs, and default refresh and metrics intervals, refer to the [SDK overview](/sdks).

## Installation

#### npm

```bash
npm install @unleash/proxy-client-vue
```

#### yarn

```bash
yarn add @unleash/proxy-client-vue
```

## Initialization

### Using config

```jsx
import { createApp } from 'vue'
import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
// import the root component App from a single-file component.
import App from './App.vue'

const config = {
  url: 'https://HOSTNAME/api/frontend',
  clientKey: 'FRONTEND_TOKEN',
  refreshInterval: 15,
  appName: 'your-app-name',
}

const app = createApp(App)
app.use(unleashPlugin, { config })
app.mount('#app')
```

Or use the FlagProvider component like this in your entrypoint file (typically App.vue):

```jsx
import { FlagProvider } from '@unleash/proxy-client-vue'

const config = {
  url: 'https://UNLEASH-INSTANCE/api/frontend',
  clientKey: 'CLIENT-SIDE-API-TOKEN',
  refreshInterval: 15,
  appName: 'your-app-name',
}

<template>
  <FlagProvider :config="config">
    <App />
  </FlagProvider>
</template>
```

### Initializing your own client

```jsx
import { createApp } from 'vue'
import { plugin as unleashPlugin } from '@unleash/proxy-client-vue'
// import the root component App from a single-file component.
import App from './App.vue'

const config = {
  url: 'https://HOSTNAME/api/frontend',
  clientKey: 'FRONTEND_TOKEN',
  refreshInterval: 15,
  appName: 'your-app-name',
}

const client = new UnleashClient(config)

const app = createApp(App)
app.use(unleashPlugin, { unleashClient: client })
app.mount('#app')
```

Or, using FlagProvider:

```jsx
import { FlagProvider, UnleashClient } from '@unleash/proxy-client-vue'

const config = {
  url: 'https://UNLEASH-INSTANCE/api/frontend',
  clientKey: 'FRONTEND_TOKEN',
  refreshInterval: 15,
  appName: 'your-app-name',
}

const client = new UnleashClient(config)

<template>
  <FlagProvider :unleash-client="client">
    <App />
  </FlagProvider>
</template>
```

### Deferring client start

By default, the Unleash client will start polling for toggles immediately when the `FlagProvider` component renders. You can delay the polling by:

* setting the `startClient` prop to `false`
* passing a client instance to the `FlagProvider`

```jsx
<template>
  <FlagProvider :unleash-client="client" :start-client="false">
    <App />
  </FlagProvider>
</template>
```

Deferring the client start gives you more fine-grained control over when to start fetching the feature toggle configuration. This could be handy in cases where you need to get some other context data from the server before fetching toggles, for instance.

To start the client, use the client's `start` method. The below snippet of pseudocode will defer polling until the end of the `asyncProcess` function.

```jsx
const client = new UnleashClient({
  /* ... */
})

onMounted(() => {
  const asyncProcess = async () => {
    // do async work ...
    client.start()
  }
  asyncProcess()
})

<template>
  <FlagProvider :unleash-client="client" :start-client="false">
    <App />
  </FlagProvider>
</template>
```

## Check flags

To check if a feature is enabled:

```jsx
<script setup>
import { useFlag } from '@unleash/proxy-client-vue'

const enabled = useFlag('travel.landing')
</script>

<template>
  <SomeComponent v-if="enabled" />
  <AnotherComponent v-else />
</template>
```

## Check variants

To check variants:

```jsx
<script setup>
import { useVariant } from '@unleash/proxy-client-vue'

const variant = useVariant('travel.landing')
</script>

<template>
  <SomeComponent v-if="variant.enabled && variant.name === 'SomeComponent'" />
  <AnotherComponent v-else-if="variant.enabled && variant.name === 'AnotherComponent'" />
  <DefaultComponent v-else />
</template>
```

## Defer rendering until flags fetched

useFlagsStatus retrieves the ready state and error events.
Follow the following steps in order to delay rendering until the flags have been fetched.

```jsx
import { useFlagsStatus } from '@unleash/proxy-client-vue'

const { flagsReady, flagsError } = useFlagsStatus()

<Loading v-if="!flagsReady" />
<MyComponent v-else error={flagsError} />
```

## Unleash context

Follow the following steps in order to update the unleash context:

```jsx
import { useUnleashContext, useFlag } from '@unleash/proxy-client-vue'

const props = defineProps<{
  userId: string
}>()

const { userId } = toRefs(props)

const updateContext = useUnleashContext()

onMounted(() => {
  updateContext({ userId })
})

watch(userId, () => {
  async function run() {
    await updateContext({ userId: userId.value })
    console.log('new flags loaded for', userId.value)
  }
  run()
})
```

## Developer toolbar

The [Developer Toolbar](/integrate/toolbar) provides runtime flag overrides during development.

```typescript {14-18}
// composables/useUnleash.ts
import { ref, onMounted } from 'vue'
import { UnleashClient } from 'unleash-proxy-client'
import { initUnleashToolbar } from '@unleash/toolbar'
import '@unleash/toolbar/toolbar.css'

export function useUnleash() {
  const unleashClient = ref(null)
  const isReady = ref(false)

  onMounted(async () => {
    const client = new UnleashClient({ /* your config */ })

    if (import.meta.env.DEV) {
      unleashClient.value = initUnleashToolbar(client, { themePreset: 'dark' })
    } else {
      unleashClient.value = client
    }

    await unleashClient.value.start()
    isReady.value = true
  })

  return { unleashClient, isReady }
}
```

Refer to the [complete Vue example on GitHub](https://github.com/Unleash/toolbar/tree/main/examples/vue) for a full implementation.

> Set up the Unleash Vue SDK to evaluate feature flags in Vue.js apps with context updates, variants, deferred start, and toolbar support.