Nuxt Flags Module

Nuxt module to use Feature Flags (as Unleash used by Gitlab) toggle feature services. Compatible with Nuxt3

• ✨  Release Notes
• 🏀 Online playground

If you want to use Nuxt2, please visit nuxt-unleash

Quick Setup

1. Add nuxt-flags dependency to your project

# Using pnpm
pnpm add -D nuxt-flags

# Using yarn
yarn add --dev nuxt-flags

# Using npm
npm install --save-dev nuxt-flags

2. Add nuxt-flags to the modules section of nuxt.config.ts

export default defineNuxtConfig({
  modules: [
    'nuxt-flags'
  ]
})

That's it! You can now use Nuxt Flags Module in your Nuxt app ✨

Module options

To configure Nuxt Flags, you can pass the flags options.

// nuxt.config.ts
export default defineNuxtConfig({
    flags: {
        url: 'https://example.com/api/v4/feature_flags/unleash/42',
        instanceId: '29QmjsW6KngPR5JNPMWx',
        appName: 'production'
    }
})

For all options available, please refer to TSDocs in your IDE, or the type definition file.

Usage

useNuxtFlags

To use nuxt-flags in your NuxtApp, call composable useNuxtFlags()

<template>
  <div v-if="myFeatureFlag.enabled">
    Show feature for {{myFeatureFlag.description}}
  </div>
  <div v-else>
    No show feature
  </div>
</template>

<script setup lang="ts">
const {get} = useNuxtFlags()
const myFeatureFlag = get('my-feature-flag') 
</script>

Its recommended use useNuxtFlag to acquire feature flags. However, you can also access the flags using the plugin syntax $flags.

const { get } = useNuxtApp().$flags

API

The module provides four methods:

exists

Returns whether a feature flag exists

// exists(name: string)
const { exists } = useNuxtFlags()
exists('new-feature')

isEnabled

If the feature flag exists, return its status value.

// isEnabled(name: string)
const { isEnabled } = useNuxtFlags()
isEnabled('new-feature')

isAllowUser

If feature flag has the strategy userWithId as user list (comma separated), returns whether myUsername is in the user list of userIds.

// isAllowUser(name: string, username: string)
const { isAllowUser } = useNuxtFlags()
isAllowUser('new-feature', 'myUsername')

isAllowIP

If feature flag has the strategy userWithId as IP list (comma separated), returns whether the current request IP is in the IP list of userIds.

// isAllowIP(name: string)
const { isAllowIP } = useNuxtFlags()
isAllowIP('new-feature')

get

Returns feature flag data (can be undefined)

// get(name: string)
const { get } = useNuxtFlags()
get('new-feature')

getAll

Returns all feature flags data

// getAll()
const { getAll } = useNuxtFlags()
getAll()

Development

1. Clone this repository
2. Install dependencies using yarn install or npm install
3. Start development server using npm run dev

License

MIT License

Copyright (c) Conejerock