Nuxt.js module to use Unleash toggle feature services

Related tags

Vue.js nuxt-unleash
Overview

nuxt-unleash

npm version npm downloads Github Actions CI Codecov License

Nuxt.js module to use Unleash toggle feature services

๐Ÿ“– Release Notes

Features

Use $unleash to access and handle your Unleash feature flags in client side, or context.app.unleash to access Unleash feature flags from server side.

Setup

  1. Add nuxt-unleash dependency to your project
yarn add nuxt-unleash
  1. Add nuxt-unleash to the modules section of nuxt.config.js
export default {
  modules: [
    // Simple usage
    'nuxt-unleash',

    // With options
    ['nuxt-unleash', { /* module options */ }]
  ]
}

โš ๏ธ If you are using Nuxt < v2.9 you have to install the module as a dependency (No --dev or --save-dev flags) and use modules section in nuxt.config.js instead of buildModules.

Using top level options

export default {
  buildModules: [
    'nuxt-unleash'
  ],
  unleash: {
    /* module options */
  }
}

Options

url

  • Type: String
  • Required: true

Unleash API URL

instanceId

  • Type: String
  • Required: true

Unleash API Instance ID

environment

  • Type: String
  • Required: false

Name of the environment your Unleash application runs in. See the example configuration.

config

The module allows some configuration parameters.

If you want to default to the value of a feature that doesn't exist, use:

enabledDefault: true

On the other hand, to set a header as the source of the ip, you can add:

headerIP: 'CF-Connection-IP'

Usage

Client Side

To access the module in side client you just have to call this.$unleash and method you want to use.

<template>
  <h1>{{ value ? 'enabled' : 'disabled' }}</h1>
</template>

<script>
export default {
  mounted() {
    this.value = this.$unleash.isEnabled('new-feature')
  }
}
</script>

Sever Side

To access the module in side server you just have to call ctx.app.unleash and method you want to use.

asyncData(ctx) {
  const value = ctx.app.unleash.isEnabled('new-feature')
  if(value) {
      ctx.redirect('/new-feature-page')
  }
}

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

You might also like...

This repo contains a fully configured nuxt 3 instance supporting TypeScript and several considered as useful libraries, fully configured and ready to use in real world projects!

Nuxt 3 Starter This repo contains a fully configured nuxt 3 instance supporting TypeScript and several considered as useful libraries, fully configure

Dec 27, 2022

This coc.nvim extension provides feature split from coc-volar

coc-volar-tools What' coc-volar-tools? This coc.nvim extension provides feature split from coc-volar. split into a separate coc-extension due to the l

Dec 14, 2022

โšก๏ธ Minimal GraphQL Client + Code Generation for Nuxt

nuxt-graphql-client โšก๏ธ Minimal GraphQL Client + Code Generation for Nuxt โšก๏ธ Minimal GraphQL Client + Code Generation for Nuxt Features Zero Configurat

Dec 27, 2022

Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 ๐Ÿ“‹

nuxt-social-tags Easy generation of OpenGraph & Twitter meta-tags in Nuxt 3 โœจ Release Notes ๐Ÿ“– Read the documentation Features Nuxt3 ready Composables

Dec 17, 2022

Easily connect your Nuxt 3 application with LogSnag ๐Ÿ“ฐ

Easily connect your Nuxt 3 application with LogSnag ๐Ÿ“ฐ

Nuxt LogSnag ๐Ÿ“ฐ LogSnag integration for Nuxt 3 โœจ Release Notes Features Nuxt 3 ready Easy integration Handy composables TypeScript support Setup Insta

Apr 28, 2022

Nuxt 3 starter with Algolia, Storyblok, and Indexer

Nuxt 3 with Storyblok CMS and Algolia Search (incl. automatic indexing) This is a demo repository for an article in Dev.to. We recommend to look at th

May 24, 2022

End-to-end typesafe APIs with tRPC.io in Nuxt applications.

End-to-end typesafe APIs with tRPC.io in Nuxt applications.

tRPC-Nuxt End-to-end typesafe APIs with tRPC.io in Nuxt applications. The client above is not importing any code from the server, only its type declar

Dec 30, 2022

A modern, zero-dependency uptime monitoring tool & status page based on GitHub Actions & Nuxt Content v2.

A modern, zero-dependency uptime monitoring tool & status page based on GitHub Actions & Nuxt Content v2.

StatusBase Uptime monitoring tool & beautiful status pages Powered by Nuxt Content v2! Free โ€ข Open Source โ€ข Notification View Demo ยท Report Bug ยท Requ

Dec 27, 2022

Batteries-included, zero-config Ionic integration for Nuxt

Nuxt Ionic Ionic integration for Nuxt โœจ Changelog ๐Ÿ“– Read the documentation โ–ถ๏ธ Online playground Features โš ๏ธ nuxt-ionic is currently a work in progres

Dec 28, 2022
Comments
  • strategies don't seem to work

    strategies don't seem to work

    Hello! Thanks for the package. Looks really good. Feature flags are working (only with full nuxt rebuild though, cannot change during the runtime) Although I don't seem to be able to use Strategies. It shows strategy properly during the nuxt build. But it doesn't seem to take it into account when I use this.feature = this.$unleash.isEnabled('test'); (always true, even if the strategy only allows certain user id's which I don't provide to the isEnabled function context. Any advice?

    opened by arnfox 1
  • Builds fail with nuxt generate because there is no ssrContext.req

    Builds fail with nuxt generate because there is no ssrContext.req

    Firstly, thanks for this module, it works great for my needs.

    Nuxt has three different modes of operating, client side, server side, and static (generated).

    Client side and server side work fine, but when running yarn run generate (static), there are build errors because in this context, there is no ssrContext.req object.

    I have fixed this for my situation by changing plugin.ts:17 to:

    if (process.server && ssrContext && ssrContext.req && ssrContext.req.socket) {

    For now my problem is solved because I applied this fix to a clone of your codebase that I published to a private npm repository, but it would be great to implement this fix so I can keep on using your module for this.

    This issue is probably specific to me, as part of our app is static (for important SEO pages) and part of it is client side only (the part behind login). The static pages should never need any feature checks anyways, so the above solution fixes the problem completely for my current needs.

    However, I can imagine there are other scenario's where it would be useful to re-hydrate the IP address in the store and revalidate enabled features on the client side. That way it would still be possible to use the IP related strategies on static sites.

    If needed, I can also create a PR for this fix and see if I can contribute to deal with the above scenario further if you'd like!

    bug 
    opened by gerbenvandijk 1
  • Cool stuff!

    Cool stuff!

    Hi there,

    just wanted to say hi, and thanks for building this!

    Would you mind being listed as one of the community SDKs? If yes, please issue a PR directly from our docs.

    Also, if you want to connect, feel free to join the entire unleash team on the Unleash community slack!

    opened by ivarconr 0
  • Supporting nuxt3

    Supporting nuxt3

    Following up https://github.com/nuxt/modules/pull/331, it would be nice if this module could support Nuxt 3. Please let me know if need any help for this.

    opened by pi0 0
Releases(1.0.4)
Owner
Juanjo Conejero
Dev and metal!
Juanjo Conejero
Nuxt-Module, that provides a system to set shopware cache-tags for later use in e.g. a full-page cache

nuxt-shopware-caching Nuxt-Module, that provides a system to set shopware cache-tags for later use in e.g. a full-page cache. This module is meant to

Mothership GmbH 5 Nov 8, 2022
๐Ÿ”Ž Algolia module for Nuxt

@nuxtjs/algolia Algolia module for Nuxt โœจ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Algolia Handy composable

Nuxt Community 128 Jan 7, 2023
Nuxt 3 module for Kirby's Query Language API

nuxt-kql Kirby KQL module for Nuxt 3. This module provides a useKql composable, which under the hood uses useFetch. Thus, KQL query fetching in your N

Johann Schopplich 25 Dec 15, 2022
Nuxt 3 module for Web3.js

nuxt-web3.js Nuxt 3 module for Web3.js. Installation npm install nuxt-web3.js Usage export default defineNuxtConfig({ modules: ['nuxt-web3.js'], })

Robert Soriano 8 Dec 16, 2022
OpenID-Connect(OIDC) integration module for nuxt 3.0.

Nuxt OpenID-Connect OpenID-Connect(OIDC) integration module for nuxt 3.0. Features An Nuxt 3 module. OIDC integration ( implemetation base openid-clie

Aborn Jiang 10 Dec 24, 2022
๐Ÿ”Ž Meilisearch module for Nuxt 3

nuxt-meilisearch Meilisearch module for Nuxt Features Nuxt 3 Easy integration with MeilisearchJS lib Support for Vue Algolia Vue 3 InstantSearch compo

Alex Duval 50 Dec 26, 2022
โœ‰๏ธ Nuxt module for first class integration with popular newsletter providers

nuxt-newsletter Newsletter module for Nuxt 3 โœจ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Mailchimp, Revue, B

Jakub Andrzejewski 39 Jan 5, 2023
๐Ÿ”Ž Algolia module for Nuxt

@nuxtjs/algolia Algolia module for Nuxt โœจ Release Notes ?? Read the documentation Features Nuxt 3 ready Easy integration with Algolia Handy composable

Nuxt Community 91 Jul 28, 2022
A Nuxt.js module that injects a server route to serve the GraphQL Playground

@pin-pon/nuxt-graphql-playground A Nuxt.js module that injects a server route to serve the GraphQL Playground Setup Add @pin-pon/nuxt-graphql-playgrou

Pin-Pon 3 Sep 22, 2022
๐Ÿช… Nuxt 3 module to connect with any API securely โ€“ server proxy & customizable composable names

nuxt-api-party This module provides composables to fetch data from an API of your choice securely. You can customize the composable names! Given json-

Johann Schopplich 65 Dec 26, 2022