nuxt-flags v1.0.0
Nuxt Flags Module
Nuxt module to use Feature Flags (as Unleash used by Gitlab) toggle feature services. Compatible with Nuxt3
If you want to use Nuxt2, please visit nuxt-unleash
Quick Setup
- 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
- Add
nuxt-flags
to themodules
section ofnuxt.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
- Clone this repository
- Install dependencies using
yarn install
ornpm install
- Start development server using
npm run dev
License
Copyright (c) Conejerock