Skip to main content

Vue

Generated content

This document was generated from README.md in the Vue GitHub repository.

tip

To connect to Unleash from a client-side context, you'll need to use the Unleash front-end API (how do I create an API token?) or the Unleash proxy (how do I create client keys?).

proxy-client-vue

PoC for a Vue SDK for Unleash based on the official proxy-client-react.

Usage note​

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

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/proxy',
  clientKey: 'PROXYKEY',
  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/proxy',
  clientKey: 'PROXYKEY',
  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: 'CLIENT—SIDE—API—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 the Proxy 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()
})

This content was generated on