Ecosyste.ms: Awesome

An open API service indexing awesome lists of open source software.

Awesome Lists | Featured Topics | Projects

https://github.com/unleash/proxy-client-vue

Vue interface for working with Unleash
https://github.com/unleash/proxy-client-vue

Last synced: 7 days ago
JSON representation

Vue interface for working with Unleash

Awesome Lists containing this project

README 

        
# proxy-client-vue



PoC for a Vue SDK for [Unleash](https://www.getunleash.io/) based on the official [proxy-client-react](https://github.com/Unleash/proxy-client-react).



## Usage note



This library is meant to be used with [Unleash Edge](https://github.com/Unleash/unleash-edge/), the [Unleash front-end API](https://docs.getunleash.io/reference/front-end-api) , or the [Unleash proxy](https://github.com/Unleash/unleash-proxy).



It is **not** compatible with the Unleash client API.



## Installation



```bash

npm install @unleash/proxy-client-vue

// or

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



```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',

}



  

    

  



```



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



```jsx

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)



  

    

  



```



### 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`



```jsx



  

    

  



```



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

})



  

    

  



```



## Usage



### Check feature toggle status



To check if a feature is enabled:



```jsx



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



const enabled = useFlag('travel.landing')



  

  



```



### Check variants



To check variants:



```jsx



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



const variant = useVariant('travel.landing')



  

  

  



```



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



```



### Updating 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()

})

```