Socket
Book a DemoInstallSign in
Socket

@unleash/proxy-client-vue

Package Overview
Dependencies
Maintainers
6
Versions
19
Alerts
File Explorer

Advanced tools

Socket logo

Install Socket

Detect and block malicious and high-risk dependencies

Install

@unleash/proxy-client-vue

Vue interface for working with Unleash

0.1.6
latest
Source
npmnpm
Version published
Maintainers
6
Created
Source

Unleash Vue SDK

Unleash is a private, secure, and scalable feature management platform built to reduce the risk of releasing new features and accelerate software development. This Frontend Vue SDK is designed to help you integrate with Unleash and evaluate feature flags inside your application.

You can use this client with Unleash Enterprise or Unleash Open Source.

Usage note

This library is meant to be used with Unleash Edge or the Unleash front-end API.

It is not compatible with the Unleash client API.

Installation

npm install @unleash/proxy-client-vue
# or
yarn add @unleash/proxy-client-vue

Initialization

Using config:

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):

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

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:

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
<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.

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>

Usage

Check feature toggle status

To check if a feature is enabled:

<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:

<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.

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

const { flagsReady, flagsError } = useFlagsStatus()

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

Updating context

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

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()
})

FAQs

Package last updated on 18 Aug 2025

Did you know?

Socket

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

About

Packages

Stay in touch

Get open source security insights delivered straight into your inbox.

  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc

U.S. Patent No. 12,346,443 & 12,314,394. Other pending.