webcc-unleash

Webcc Unleash

Nuxt module to use Unleash feature flags

Installation

1. Install webcc-unleash dependency to your project:

yarn add --dev webcc-unleash

2. Add webcc-unleash to your nuxt.config.ts

export default defineNuxtConfig({
  modules: ['webcc-unleash'],

  webccUnleash: {
    // when config plugin should wait app plugins, e.g. `pluginDeps: ['init-plugin']`
    pluginDeps: []
  },

  // Values from .env file are automatically inserted into the corresponding fields in the runtimeConfig.
  runtimeConfig: {
    unleash: {
      apiKey: '',
    },
    public: {
      unleash: {
        url: '',
        appName: '',
        environment: '',
        featureBaseUrl:
          'https://app.unleash-hosted.com/KEY_ID/projects/PROJ/features/',
      },
    },
  },
})

3. Create unleash.config.ts in your root directory and implement getContext() function

import type { H3Event } from 'h3'
import type { UnleashAppConfig } from '#build/types/unleash'

export default {
  getContext(req: H3Event) {
    return {
      userId: 'some-user-id',
      domain: undefined,
      remoteAddress: '123.1.2.3',
      properties: { language: 'EN', fullDomain: 'undefined', partnerId: undefined },
    }
  },
} satisfies UnleashAppConfig

That's it! You can now use Webcc Unleash in your Nuxt app ✨

Usage

You can use the useFlag() composable to get the status of your feature flag

const isEnabled = useFlag('your-feature-flag')

Other composables, mostly for dev-only usage:

// useFeature
const feature = useFeature('your-feature-flag')
const {
  key, // unique key
  title,
  url,
  isEnabled,
  variant,
  variants,
  markers, // keywords `[keyword]` in feature description
  toggle,
} = feature

const features = useFeatures({
  all: true, // when true, then pick also disabled features
})

Contribution

# Install dependencies
yarn install

# Generate type stubs
yarn dev:prepare

# Develop with the playground
yarn dev

# Build the playground
yarn dev:build

# Release new version
yarn release