> ## Documentation Index
> Fetch the complete documentation index at: https://docs.westyx.cloud/llms.txt
> Use this file to discover all available pages before exploring further.

# OpenFeature provider

> OpenFeature bridge for @westyx-nexus/sdk-vue - use standard OpenFeature composables alongside the Nexus Vue SDK.

The `@westyx-nexus/openfeature-provider-vue` package bridges the Nexus Vue SDK into the [OpenFeature Web SDK](https://openfeature.dev/docs/reference/technologies/client/web/). It wraps an existing `NexusClient` and emits `ConfigurationChanged` on every cache update so OpenFeature clients re-evaluate flags automatically.

## Installation

```sh theme={null}
npm install @westyx-nexus/sdk-vue @westyx-nexus/openfeature-provider-vue @openfeature/vue-sdk
```

Configure the npm registry for the Westyx Nexus scope - see [Installation](installation).

## Quick start

```ts theme={null}
// main.ts
import { createApp } from 'vue';
import { OpenFeature } from '@openfeature/vue-sdk';
import { provideNexus } from '@westyx-nexus/sdk-vue';
import { createOpenFeatureProvider } from '@westyx-nexus/openfeature-provider-vue';
import App from './App.vue';

const app = createApp(App);
const client = await provideNexus(app, {
  baseUrl: 'https://blue-ocean-a5rx7.westyx.dev',
  apiKey:  'wxp_...',
});
await OpenFeature.setProviderAndWait(createOpenFeatureProvider(client));
app.mount('#app');
```

`provideNexus` returns the initialised `NexusClient`; pass it directly to `createOpenFeatureProvider`.

```vue theme={null}
<!-- CheckoutButton.vue -->
<script setup lang="ts">
import { useBooleanFlagValue } from '@openfeature/vue-sdk';

const showBanner = useBooleanFlagValue('banner.enabled', false);
</script>

<template>
  <div v-if="showBanner"><Banner /></div>
  <CheckoutForm />
</template>
```

## Evaluation mapping

| OpenFeature method         | Nexus source                   | Error codes                                                              |
| -------------------------- | ------------------------------ | ------------------------------------------------------------------------ |
| `resolveBooleanEvaluation` | `client.getFlag(key, default)` | None - `getFlag` always returns a value                                  |
| `resolveStringEvaluation`  | `client.getConfig(key)`        | `FLAG_NOT_FOUND` if absent; `TYPE_MISMATCH` if not a string              |
| `resolveNumberEvaluation`  | `client.getConfig(key)`        | `FLAG_NOT_FOUND` if absent; `TYPE_MISMATCH` if not coercible to a number |
| `resolveObjectEvaluation`  | `client.getConfig(key)`        | `FLAG_NOT_FOUND` if absent; `TYPE_MISMATCH` if not an object or array    |

All evaluations use the `STATIC` resolution reason. The provider does not perform per-user targeting - use `client.evaluateAB()` directly for that.

## Live updates

The provider subscribes to the Nexus client on `initialize()`. Each time the client's cache refreshes - via SSE push or TTL poll - the provider emits `ProviderEvents.ConfigurationChanged`. OpenFeature's Vue bindings pick this up and trigger reactive updates in components that consume the changed flags.

## API reference

### `NexusVueProvider`

```ts theme={null}
class NexusVueProvider implements Provider {
  constructor(client: NexusClient);
  readonly runsOn: 'client';
  initialize(context?: EvaluationContext): Promise<void>;
  onClose(): Promise<void>;
  resolveBooleanEvaluation(flagKey: string, defaultValue: boolean, ...): ResolutionDetails<boolean>;
  resolveStringEvaluation(flagKey: string, defaultValue: string, ...): ResolutionDetails<string>;
  resolveNumberEvaluation(flagKey: string, defaultValue: number, ...): ResolutionDetails<number>;
  resolveObjectEvaluation<T extends JsonValue>(flagKey: string, defaultValue: T, ...): ResolutionDetails<T>;
}
```

### `createOpenFeatureProvider`

```ts theme={null}
function createOpenFeatureProvider(client: NexusClient): NexusVueProvider;
```

Convenience factory equivalent to `new NexusVueProvider(client)`.

<Warning>
  Browser SDKs must use a `wxp_...` (public) key. Never embed secret keys (`wxs_...`) in browser code.
</Warning>