# Reference

## Interfaces

### CheckEvent

Event representing checking the flag evaluation result

#### Properties

| Property                 | Type                                                   | Description                                                                                                                                                                                                                           |
| ------------------------ | ------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `action`                 | `"check-is-enabled"` \| `"check-config"`               | `check-is-enabled` means `isEnabled` was checked, `check-config` means `config` was checked.                                                                                                                                          |
| `key`                    | `string`                                               | Flag key.                                                                                                                                                                                                                             |
| `missingContextFields?`  | `string`\[]                                            | Missing context fields.                                                                                                                                                                                                               |
| `ruleEvaluationResults?` | `boolean`\[]                                           | Rule evaluation results.                                                                                                                                                                                                              |
| `value?`                 | \| `boolean` \| { `key`: `string`; `payload`: `any`; } | Result of flag or configuration evaluation. If `action` is `check-is-enabled`, this is the result of the flag evaluation and `value` is a boolean. If `action` is `check-config`, this is the result of the configuration evaluation. |
| `version?`               | `number`                                               | Version of targeting rules.                                                                                                                                                                                                           |

***

### CompanyContext

Context is a set of key-value pairs. This is used to determine if feature targeting matches and to track events. Id should always be present so that it can be referenced to an existing company.

#### Indexable

```ts
[key: string]: undefined | string | number
```

#### Properties

| Property | Type                                | Description  |
| -------- | ----------------------------------- | ------------ |
| `id`     | `undefined` \| `string` \| `number` | Company id   |
| `name?`  | `string`                            | Company name |

***

### Flag\<TConfig>

#### Type Parameters

| Type Parameter                                           | Default type                                      |
| -------------------------------------------------------- | ------------------------------------------------- |
| `TConfig` *extends* [`FlagType`](#flagtype)\[`"config"`] | [`EmptyFlagRemoteConfig`](#emptyflagremoteconfig) |

#### Properties

| Property          | Type                                                                                                                                                                                       |
| ----------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `config`          | `Ref`< \| [`EmptyFlagRemoteConfig`](#emptyflagremoteconfig) \| { `key`: `string`; } & `TConfig`, \| [`EmptyFlagRemoteConfig`](#emptyflagremoteconfig) \| { `key`: `string`; } & `TConfig`> |
| `isEnabled`       | `Ref`<`boolean`, `boolean`>                                                                                                                                                                |
| `isLoading`       | `Ref`<`boolean`, `boolean`>                                                                                                                                                                |
| `key`             | `string`                                                                                                                                                                                   |
| `requestFeedback` | (`opts`: [`RequestFlagFeedbackOptions`](#requestflagfeedbackoptions)) => `void`                                                                                                            |

#### Methods

**track()**

```ts
track(): 
  | undefined
  | Promise<
  | undefined
| Response>
```

**Returns**

\| `undefined` | [`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)< | `undefined` | [`Response`](https://developer.mozilla.org/docs/Web/API/Response)>

***

### Flags

***

### UserContext

Context is a set of key-value pairs. This is used to determine if feature targeting matches and to track events. Id should always be present so that it can be referenced to an existing user.

#### Indexable

```ts
[key: string]: undefined | string | number
```

#### Properties

| Property | Type                                | Description |
| -------- | ----------------------------------- | ----------- |
| `email?` | `string`                            | User email  |
| `id`     | `undefined` \| `string` \| `number` | User id     |
| `name?`  | `string`                            | User name   |

## Type Aliases

### BootstrappedFlags

```ts
type BootstrappedFlags = {
  context: ReflagContext;
  flags: RawFlags;
};
```

#### Type declaration

| Name      | Type                                                                         |
| --------- | ---------------------------------------------------------------------------- |
| `context` | [`ReflagContext`](/supported-languages/browser-sdk/globals.md#reflagcontext) |
| `flags`   | [`RawFlags`](/supported-languages/browser-sdk/globals.md#rawflags)           |

***

### EmptyFlagRemoteConfig

```ts
type EmptyFlagRemoteConfig = {
  key: undefined;
  payload: undefined;
};
```

#### Type declaration

| Name      | Type        |
| --------- | ----------- |
| `key`     | `undefined` |
| `payload` | `undefined` |

***

### FlagType

```ts
type FlagType = {
  config: {
     payload: any;
    };
};
```

#### Type declaration

| Name             | Type                  |
| ---------------- | --------------------- |
| `config`?        | { `payload`: `any`; } |
| `config.payload` | `any`                 |

***

### ReflagBaseProps

```ts
type ReflagBaseProps = {
  debug: boolean;
  initialLoading: boolean;
  logger: Logger;
};
```

**`Internal`**

Base props for the ReflagProvider and ReflagBootstrappedProvider.

#### Type declaration

| Name              | Type                                                             | Description                                                                                                                                                        |
| ----------------- | ---------------------------------------------------------------- | ------------------------------------------------------------------------------------------------------------------------------------------------------------------ |
| `debug`?          | `boolean`                                                        | Set to `true` to enable debug logging to the console.                                                                                                              |
| `initialLoading`? | `boolean`                                                        | Set to `true` to show the loading component while the client is initializing.                                                                                      |
| `logger`?         | [`Logger`](/supported-languages/browser-sdk/globals.md#logger-1) | A custom logger to use for SDK logs. Use this for advanced control or filtering of SDK logs. If both `logger` and `debug` are provided, `logger` takes precedence. |

***

### ReflagBootstrappedProps

```ts
type ReflagBootstrappedProps = ReflagInitOptionsBase & ReflagBaseProps & {
  flags: BootstrappedFlags;
};
```

Props for the ReflagBootstrappedProvider.

#### Type declaration

| Name    | Type                                      | Description                                                            |
| ------- | ----------------------------------------- | ---------------------------------------------------------------------- |
| `flags` | [`BootstrappedFlags`](#bootstrappedflags) | Pre-fetched flags to be used instead of fetching them from the server. |

***

### ReflagClientProviderProps

```ts
type ReflagClientProviderProps = Omit<ReflagBaseProps, "debug" | "logger"> & {
  client: ReflagClient;
};
```

Props for the ReflagClientProvider.

#### Type declaration

| Name     | Type                                                                       | Description                            |
| -------- | -------------------------------------------------------------------------- | -------------------------------------- |
| `client` | [`ReflagClient`](/supported-languages/browser-sdk/globals.md#reflagclient) | A pre-initialized ReflagClient to use. |

***

### ReflagInitOptionsBase

```ts
type ReflagInitOptionsBase = Omit<InitOptions, 
  | "user"
  | "company"
  | "other"
  | "otherContext"
  | "bootstrappedFlags"
| "logger">;
```

**`Internal`**

Base init options for the ReflagProvider and ReflagBootstrappedProvider.

***

### ReflagProps

```ts
type ReflagProps = ReflagInitOptionsBase & ReflagBaseProps & {
  company: CompanyContext;
  context: ReflagContext;
  otherContext: Record<string, string | number | undefined>;
  user: UserContext;
};
```

Props for the ReflagProvider.

#### Type declaration

| Name            | Type                                                                                                                                       | Description                                                                                                                                                                                                                                                                           |
| --------------- | ------------------------------------------------------------------------------------------------------------------------------------------ | ------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- |
| `company`?      | [`CompanyContext`](#companycontext)                                                                                                        | <p>Company related context. If you provide <code>id</code> Reflag will enrich the evaluation context with company attributes on Reflag servers.</p><p><strong>Deprecated</strong></p><p>Use <code>context</code> instead, this property will be removed in the next major version</p> |
| `context`?      | [`ReflagContext`](/supported-languages/browser-sdk/globals.md#reflagcontext)                                                               | The context to use for the ReflagClient containing user, company, and other context.                                                                                                                                                                                                  |
| `otherContext`? | [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)<`string`, `string` \| `number` \| `undefined`> | <p>Context which is not related to a user or a company.</p><p><strong>Deprecated</strong></p><p>Use <code>context</code> instead, this property will be removed in the next major version</p>                                                                                         |
| `user`?         | [`UserContext`](#usercontext)                                                                                                              | <p>User related context. If you provide <code>id</code> Reflag will enrich the evaluation context with user attributes on Reflag servers.</p><p><strong>Deprecated</strong></p><p>Use <code>context</code> instead, this property will be removed in the next major version</p>       |

***

### RequestFlagFeedbackOptions

```ts
type RequestFlagFeedbackOptions = Omit<RequestFeedbackData, "flagKey" | "featureId">;
```

***

### TrackEvent

```ts
type TrackEvent = {
  attributes:   | Record<string, any>
     | null;
  company: CompanyContext;
  eventName: string;
  user: UserContext;
};
```

#### Type declaration

| Name          | Type                                                                                                                      |
| ------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `attributes`? | \| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)<`string`, `any`> \| `null` |
| `company`?    | [`CompanyContext`](#companycontext)                                                                                       |
| `eventName`   | `string`                                                                                                                  |
| `user`        | [`UserContext`](#usercontext)                                                                                             |

***

### TypedFlags

```ts
type TypedFlags = keyof Flags extends never ? Record<string, Flag> : { [TypedFlagKey in keyof Flags]: Flags[TypedFlagKey] extends FlagType ? Flag<Flags[TypedFlagKey]["config"]> : Flag };
```

## Variables

### default

```ts
default: {
  install: void;
};
```

#### Type declaration

| Name        | Type   |
| ----------- | ------ |
| `install()` | `void` |

***

### ReflagBootstrappedProvider

```ts
const ReflagBootstrappedProvider: DefineComponent<Record<string, unknown>, Record<string, unknown>, unknown>;
```

## Functions

### useClient()

```ts
function useClient(): ReflagClient
```

Vue composable for getting the Reflag client.

This composable returns the Reflag client. You can use this to get the Reflag client at any point in your application.

#### Returns

[`ReflagClient`](/supported-languages/browser-sdk/globals.md#reflagclient)

The Reflag client.

#### Example

```ts
import { useClient } from '@reflag/vue-sdk';

const client = useClient();

console.log(client.getContext());
```

***

### useFlag()

```ts
function useFlag<TKey>(key: TKey): TypedFlags[TKey]
```

Vue composable for getting the state of a given flag for the current context.

This composable returns an object with the state of the flag for the current context.

#### Type Parameters

| Type Parameter            |
| ------------------------- |
| `TKey` *extends* `string` |

#### Parameters

| Parameter | Type   | Description                              |
| --------- | ------ | ---------------------------------------- |
| `key`     | `TKey` | The key of the flag to get the state of. |

#### Returns

[`TypedFlags`](#typedflags)\[`TKey`]

An object with the state of the flag.

#### Example

```ts
import { useFlag } from '@reflag/vue-sdk';

const { isEnabled, config, track, requestFeedback } = useFlag("huddles");

function StartHuddlesButton() {
  const { isEnabled, config: { payload }, track } = useFlag("huddles");
  if (isEnabled) {
   return <button onClick={() => track()}>{payload?.buttonTitle ?? "Start Huddles"}</button>;
}
```

***

### useIsLoading()

```ts
function useIsLoading(): Ref<boolean, boolean>
```

Vue composable for checking if the Reflag client is loading.

This composable returns a boolean value that indicates whether the Reflag client is loading. You can use this to check if the Reflag client is loading at any point in your application. Initially, the value will be true until the client is initialized.

#### Returns

`Ref`<`boolean`, `boolean`>

#### Example

```ts
import { useIsLoading } from '@reflag/vue-sdk';

const isLoading = useIsLoading();

console.log(isLoading);
```

***

### useOnEvent()

```ts
function useOnEvent<THookType>(
   event: THookType, 
   handler: (arg0: HookArgs[THookType]) => void, 
   client?: ReflagClient): void
```

Vue composable for listening to Reflag client events.

#### Type Parameters

| Type Parameter                                                                                 |
| ---------------------------------------------------------------------------------------------- |
| `THookType` *extends* keyof [`HookArgs`](/supported-languages/browser-sdk/globals.md#hookargs) |

#### Parameters

| Parameter | Type                                                                                                 | Description                                                                                     |
| --------- | ---------------------------------------------------------------------------------------------------- | ----------------------------------------------------------------------------------------------- |
| `event`   | `THookType`                                                                                          | The event to listen to.                                                                         |
| `handler` | (`arg0`: [`HookArgs`](/supported-languages/browser-sdk/globals.md#hookargs)\[`THookType`]) => `void` | The function to call when the event is triggered.                                               |
| `client`? | [`ReflagClient`](/supported-languages/browser-sdk/globals.md#reflagclient)                           | The Reflag client to listen to. If not provided, the client will be retrieved from the context. |

#### Returns

`void`

#### Example

```ts
import { useOnEvent } from '@reflag/vue-sdk';

useOnEvent("flagsUpdated", () => {
  console.log("flags updated");
});
```

***

### useRequestFeedback()

```ts
function useRequestFeedback(): (options: RequestFeedbackData) => void
```

Vue composable for requesting user feedback.

This composable returns a function that can be used to trigger the feedback collection flow with the Reflag SDK. You can use this to prompt users for feedback at any point in your application.

#### Returns

`Function`

A function that requests feedback from the user. The function accepts:

* `options`: An object containing feedback request options.

**Parameters**

| Parameter | Type                                                                                     |
| --------- | ---------------------------------------------------------------------------------------- |
| `options` | [`RequestFeedbackData`](/supported-languages/browser-sdk/globals.md#requestfeedbackdata) |

**Returns**

`void`

#### Example

```ts
import { useRequestFeedback } from '@reflag/vue-sdk';

const requestFeedback = useRequestFeedback();

// Request feedback from the user
requestFeedback({
  prompt: "How was your experience?",
  metadata: { page: "dashboard" }
});
```

***

### useSendFeedback()

```ts
function useSendFeedback(): (opts: UnassignedFeedback) => Promise<
  | undefined
| Response>
```

Vue composable for sending feedback.

This composable returns a function that can be used to send feedback to the Reflag SDK. You can use this to send feedback from your application.

#### Returns

`Function`

A function that sends feedback to the Reflag SDK. The function accepts:

* `options`: An object containing feedback options.

**Parameters**

| Parameter | Type                                                                                   |
| --------- | -------------------------------------------------------------------------------------- |
| `opts`    | [`UnassignedFeedback`](/supported-languages/browser-sdk/globals.md#unassignedfeedback) |

**Returns**

[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)< | `undefined` | [`Response`](https://developer.mozilla.org/docs/Web/API/Response)>

#### Example

```ts
import { useSendFeedback } from '@reflag/vue-sdk';

const sendFeedback = useSendFeedback();

// Send feedback from the user
sendFeedback({
  feedback: "I love this flag!",
  metadata: { page: "dashboard" }
});
```

***

### useTrack()

```ts
function useTrack(): (eventName: string, attributes?: 
  | null
  | Record<string, any>) => Promise<
  | undefined
| Response>
```

Vue composable for tracking custom events.

This composable returns a function that can be used to track custom events with the Reflag SDK.

#### Returns

`Function`

A function that tracks an event. The function accepts:

* `eventName`: The name of the event to track.
* `attributes`: (Optional) Additional attributes to associate with the event.

**Parameters**

| Parameter     | Type                                                                                                                      |
| ------------- | ------------------------------------------------------------------------------------------------------------------------- |
| `eventName`   | `string`                                                                                                                  |
| `attributes`? | \| `null` \| [`Record`](https://www.typescriptlang.org/docs/handbook/utility-types.html#recordkeys-type)<`string`, `any`> |

**Returns**

[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)< | `undefined` | [`Response`](https://developer.mozilla.org/docs/Web/API/Response)>

#### Example

```ts
import { useTrack } from '@reflag/vue-sdk';

const track = useTrack();

// Track a custom event
track('button_clicked', { buttonName: 'Start Huddles' });
```

***

### useUpdateCompany()

```ts
function useUpdateCompany(): (opts: {}) => Promise<void>
```

Vue composable for updating the company context.

This composable returns a function that can be used to update the company context with the Reflag SDK. You can use this to update the company context at any point in your application.

#### Returns

`Function`

A function that updates the company context. The function accepts:

* `opts`: An object containing the company context to update.

**Parameters**

| Parameter | Type |
| --------- | ---- |
| `opts`    | {}   |

**Returns**

[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)<`void`>

#### Example

```ts
import { useUpdateCompany } from '@reflag/vue-sdk';

const updateCompany = useUpdateCompany();

// Update the company context
updateCompany({ id: "123", name: "Acme Inc." });
```

***

### useUpdateOtherContext()

```ts
function useUpdateOtherContext(): (opts: {}) => Promise<void>
```

Vue composable for updating the other context.

This composable returns a function that can be used to update the other context with the Reflag SDK. You can use this to update the other context at any point in your application.

#### Returns

`Function`

A function that updates the other context. The function accepts:

* `opts`: An object containing the other context to update.

**Parameters**

| Parameter | Type |
| --------- | ---- |
| `opts`    | {}   |

**Returns**

[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)<`void`>

#### Example

```ts
import { useUpdateOtherContext } from '@reflag/vue-sdk';

const updateOtherContext = useUpdateOtherContext();

// Update the other context
updateOtherContext({ id: "123", name: "Acme Inc." });
```

***

### useUpdateUser()

```ts
function useUpdateUser(): (opts: {}) => Promise<void>
```

Vue composable for updating the user context.

This composable returns a function that can be used to update the user context with the Reflag SDK. You can use this to update the user context at any point in your application.

#### Returns

`Function`

A function that updates the user context. The function accepts:

* `opts`: An object containing the user context to update.

**Parameters**

| Parameter | Type |
| --------- | ---- |
| `opts`    | {}   |

**Returns**

[`Promise`](https://developer.mozilla.org/docs/Web/JavaScript/Reference/Global_Objects/Promise)<`void`>

#### Example

```ts
import { useUpdateUser } from '@reflag/vue-sdk';

const updateUser = useUpdateUser();

// Update the user context
updateUser({ id: "123", name: "John Doe" });
```

## References

### ReflagClientProvider

Renames and re-exports [ReflagBootstrappedProvider](#reflagbootstrappedprovider)

### ReflagProvider

Renames and re-exports [ReflagBootstrappedProvider](#reflagbootstrappedprovider)


---

# Agent Instructions: Querying This Documentation

If you need additional information that is not directly available in this page, you can query the documentation dynamically by asking a question.

Perform an HTTP GET request on the current page URL with the `ask` query parameter:

```
GET https://docs.reflag.com/supported-languages/vue-sdk/globals.md?ask=<question>
```

The question should be specific, self-contained, and written in natural language.
The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.