@usebool/sdk-vue

Bool - Vue SDK

Bool provides simple and powerful feature management tools, giving you total control of your feature rollout. Test in production, ship code faster, simpler, safer and smarter.

Introduction

This package is our Vue (JavaScript) SDK. This is intended for specific usage within Vue applications. It is build upon our core JavaScript SDK.

Getting started

Install the Vue SDK using your package manager of choice:

// npm example
npm install @usebool/sdk-vue

// yarn example
yarn add @usebool/sdk-vue

// pnpm example
pnpm install @usebool/sdk-vue

To use the JavaScript SDK, you will need an application token. This token will be provided in the bool dashboard and it is not a secret, meaning that there is no danger in exposing it in your client-side code.

SDK usage

Before consuming feature flags, you need to initialise the Bool client. You can do this in any mounted component (e.g. App.vue) or composable, as long as it is run before you need it. Note, that this is a default export, so you are free to name it whatever you want.

import boolClient from '@usebool/sdk-vue';

boolClient({ idToken: YOUR_ID_TOKEN });

You are now left with fetching feature flags where you have two options.

useGetFeatures

For fetching all the feature flags you can call the useGetFeatures hook. This returns a list of feature flags.

// Resolves in a list of feature flags
const allFeatures = useGetFeatures();

If there are no feature flags, an empty list will be returned. In case of a faulty request the function will log a generic error saying "Something went wrong. It seems you don't have any feature flags.", and will return an empty list by default.

useHasFeature

// Resolves in a boolean
const isAmazingFeatureEnabled = useHasFeature('MY_AMAZING_FEATURE');

In case the feature flag cannot be found, the function will log an error saying 'A feature with key ${featureKey} was not found. Did you create it in your dashboard?' and will return false. By returning false the hook provides fallback in case of an accidental deletion of a feature flag.

Usage

// App.vue
<template>
  <div>
    <Header />
    <Content />
  </div>
<template>

<script lang="ts" setup>
import boolClient from '@usebool/sdk-vue';

boolClient({ idToken: YOUR_APP_ID });
</script>

// Header.vue
<template>
  <div>
    <AmazingFeature v-if="isAmazingFeatureEnabled" />
  </div>
<template>

<script lang="ts" setup>
import { useHasFeature } from '@usebool/sdk-vue';

const isAmazingFeatureEnabled = useHasFeature('MY_AMAZING_FEATURE');
</script>

TypeScript

This package also provides the types in the event of using typescript in your project.