Security News
Node.js EOL Versions CVE Dubbed the "Worst CVE of the Year" by Security Experts
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
@unleash/proxy-client-vue
Advanced tools
PoC for a Vue SDK for Unleash based on the official proxy-client-react.
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.
npm install @unleash/proxy-client-vue
// or
yarn add @unleash/proxy-client-vue
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>
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>
By default, the Unleash client will start polling the Proxy for toggles immediately when the FlagProvider
component renders. You can delay the polling by:
startClient
prop to false
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>
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>
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>
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} />
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
Vue interface for working with Unleash
The npm package @unleash/proxy-client-vue receives a total of 6,061 weekly downloads. As such, @unleash/proxy-client-vue popularity was classified as popular.
We found that @unleash/proxy-client-vue demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
Did you know?
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.
Security News
Critics call the Node.js EOL CVE a misuse of the system, sparking debate over CVE standards and the growing noise in vulnerability databases.
Security News
cURL and Go security teams are publicly rejecting CVSS as flawed for assessing vulnerabilities and are calling for more accurate, context-aware approaches.
Security News
Bun 1.2 enhances its JavaScript runtime with 90% Node.js compatibility, built-in S3 and Postgres support, HTML Imports, and faster, cloud-first performance.