nuxt-flagsmith/README.md

Nuxt.js module to use Flagsmith toggle feature services

# nuxt-flagsmith

[![npm version][npm-version-src]][npm-version-href]
[![npm downloads][npm-downloads-src]][npm-downloads-href]
[![Github Actions CI][github-actions-ci-src]][github-actions-ci-href]
[![Codecov][codecov-src]][codecov-href]
[![License][license-src]][license-href]

> Nuxt.js module to use [Flagsmith](https://flagsmith.com/) toggle feature services

> Inspired from [conejerock](https://github.com/conejerock)'s [nuxt-unleash](https://github.com/conejerock/nuxt-unleash).


[📖 **Release Notes**](./CHANGELOG.md)

## Features

Use `$flagsmith` to access and handle your _Flagsmith_ feature flags in client side,
or `context.app.flagsmith` to access _Flagsmith_ feature flags from server side.

## Setup

1. Add `nuxt-flagsmith` dependency to your project

```bash
yarn add nuxt-flagsmith
```

2. Add `nuxt-flagsmith` to the `modules` section of `nuxt.config.js`

```js
export default {
  modules: [
    // Simple usage
    'nuxt-flagsmith',

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

:warning: 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

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

## Options

### `host`

- Type: `String`
- Required: `false`
- Default: `https://api.flagsmith.com`

Flagsmith API URL

### `environmentId`

- Type: `String`
- Required: `true`

Flagsmith API Environment ID

## Usage

#### Client Side

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

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

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

```

#### Sever Side

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

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

### Methods

The library provides four methods:

#### isEnabled

If the feature flag exists, return its status value. Otherwise, return the value of module option `enabledDefault`.

```js
this.$flagsmith.isEnabled('new-feature')
```

## 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](./LICENSE)

Copyright (c) mstfymrtc

<!-- Badges -->

[npm-version-src]: https://img.shields.io/npm/v/nuxt-flagsmith/latest.svg
[npm-version-href]: https://npmjs.com/package/nuxt-flagsmith
[npm-downloads-src]: https://img.shields.io/npm/dt/nuxt-flagsmith.svg
[npm-downloads-href]: https://npmjs.com/package/nuxt-flagsmith
[github-actions-ci-src]: https://github.com/mstfymrtc/nuxt-flagsmith/workflows/ci/badge.svg
[github-actions-ci-href]: https://github.com/mstfymrtc/nuxt-flagsmith/actions?query=workflow%3Aci
[codecov-src]: https://img.shields.io/codecov/c/github/mstfymrtc/nuxt-flagsmith.svg
[codecov-href]: https://codecov.io/gh/mstfymrtc/nuxt-flagsmith
[license-src]: https://img.shields.io/npm/l/nuxt-flagsmith.svg
[license-href]: https://npmjs.com/package/nuxt-flagsmith