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

[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["config"]	EmptyFlagRemoteConfig

Properties

Property	Type
config	Ref< | EmptyFlagRemoteConfig | { key: string; } & TConfig, | EmptyFlagRemoteConfig | { key: string; } & TConfig>
isEnabled	Ref<boolean, boolean>
isLoading	Ref<boolean, boolean>
key	string
requestFeedback	(opts: RequestFlagFeedbackOptions) => void

Methods

track()

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

Returns

| undefined | Promise< | undefined | 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

[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

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

Type declaration

Name	Type
context	ReflagContext
flags	RawFlags

---

EmptyFlagRemoteConfig

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

Type declaration

Name	Type
key	undefined
payload	undefined

---

FlagType

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

Type declaration

Name	Type
config?	{ payload: any; }
config.payload	any

---

ReflagBaseProps

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

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

Props for the ReflagBootstrappedProvider.

Type declaration

Name	Type	Description
flags	BootstrappedFlags	Pre-fetched flags to be used instead of fetching them from the server.

---

ReflagClientProviderProps

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

Props for the ReflagClientProvider.

Type declaration

Name	Type	Description
client	ReflagClient	A pre-initialized ReflagClient to use.

---

ReflagInitOptionsBase

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

Internal

Base init options for the ReflagProvider and ReflagBootstrappedProvider.

---

ReflagProps

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	Company related context. If you provide id Reflag will enrich the evaluation context with company attributes on Reflag servers. Deprecated Use context instead, this property will be removed in the next major version
context?	ReflagContext	The context to use for the ReflagClient containing user, company, and other context.
otherContext?	Record<string, string | number | undefined>	Context which is not related to a user or a company. Deprecated Use context instead, this property will be removed in the next major version
user?	UserContext	User related context. If you provide id Reflag will enrich the evaluation context with user attributes on Reflag servers. Deprecated Use context instead, this property will be removed in the next major version

---

RequestFlagFeedbackOptions

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

---

TrackEvent

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

Type declaration

Name	Type
attributes?	| Record<string, any> | null
company?	CompanyContext
eventName	string
user	UserContext

---

TypedFlags

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

Variables

default

default: {
  install: void;
};

Type declaration

Name	Type
install()	void

---

ReflagBootstrappedProvider

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

Functions

useClient()

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

The Reflag client.

Example

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

const client = useClient();

console.log(client.getContext());

---

useFlag()

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[TKey]

An object with the state of the flag.

Example

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

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

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

const isLoading = useIsLoading();

console.log(isLoading);

---

useOnEvent()

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

Parameters

Parameter	Type	Description
event	THookType	The event to listen to.
handler	(arg0: HookArgs[THookType]) => void	The function to call when the event is triggered.
client?	ReflagClient	The Reflag client to listen to. If not provided, the client will be retrieved from the context.

Returns

void

Example

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

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

---

useRequestFeedback()

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

Returns

void

Example

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

const requestFeedback = useRequestFeedback();

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

---

useSendFeedback()

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

Returns

Promise< | undefined | Response>

Example

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

const sendFeedback = useSendFeedback();

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

---

useTrack()

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<string, any>

Returns

Promise< | undefined | Response>

Example

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

const track = useTrack();

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

---

useUpdateCompany()

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<void>

Example

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

const updateCompany = useUpdateCompany();

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

---

useUpdateOtherContext()

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<void>

Example

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

const updateOtherContext = useUpdateOtherContext();

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

---

useUpdateUser()

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<void>

Example

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

ReflagProvider

Renames and re-exports ReflagBootstrappedProvider