# @unrevealed/vue

> Unrevealed SDK for Vue

Latest version **0.0.3** (published 2023-07-14) · MIT license · 0 weekly downloads

## Install

```sh
npm install @unrevealed/vue
pnpm add @unrevealed/vue
yarn add @unrevealed/vue
bun add @unrevealed/vue
```

## Health

**Score 20/100 (F)** — status: abandoned.

Positive: has types; no vulnerabilities.

Warnings: low downloads; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.0.3 |
| Published | 2023-07-14 |
| First published | 2023-04-29 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | bundled |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 33.1 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 4 |
| Author | Unrevealed |
| Maintainers | tgroutars |
| Keywords | unrevealed, vue, feature flag, feature toggle, feature switch, release |

## Links

- npm: https://www.npmjs.com/package/@unrevealed/vue
- Repository: https://github.com/unrevealedtech/unrevealed
- Homepage: https://docs.unrevealed.tech/docs/vue
- Issues: https://github.com/unrevealedtech/unrevealed/issues
- npm.io page: https://npm.io/package/@unrevealed/vue

## Recent versions

- 0.0.3 (latest) — 2023-07-14
- 0.0.1-rc.3 (canary) — 2023-05-06
- 0.0.2 — 2023-05-15
- 0.0.1 — 2023-05-06
- 0.0.1-rc.2 — 2023-04-29
- 0.0.1-rc.1 — 2023-04-29

## README

# Vue SDK

Integrate Unrevealed in your front-end Vue applications

## Getting Started

```bash
npm install @unrevealed/vue
```

```bash
yarn add @unrevealed/vue
```

```bash
pnpm install @unrevealed/vue
```

## Usage

### Plugin

Install the Unrevealed plugin to get started. To generate an client api key, go to the Api Keys menu in the app and create one. Select Client as the target SDK.

You should use different api keys for different environments.

```ts
import { UnrevealedPlugin } from '@unrevealed/vue';

app.use(UnrevealedPlugin, { clientKey: yourClientKey });
```

### Identify

You can use the `identify` function returned from `useIdentify` to set the current user and team. Both are optional, but if your logged in user is part of an organization, or is currently in the context of a specific workspace of your app, we highly recommend you pass both.

```vue
<script setup lang="ts">
import { useIdentify } from '@unrevealed/vue';

const { identify } = useIdentify();

// Optional, if you need to load features for logged out users
identify({ user: null });

const login = () => {
  // ...
  identify({
    user: {
      id: user.id,
      traits: {
        email: user.email,
        name: user.name,
        // ...
      },
    },
    team: {
      id: team.id,
      traits: {
        name: team.name,
        plan: team.plan,
        // ...
      },
    },
  });
};
</script>
```

### Checking if a feature is enabled

```vue
<script setup lang="ts">
import { useFeature } from '@unrevealed/vue';

const feature = useFeature('feature-key');
</script>

<template>
  <div v-if="feature.enabled">Feature is enabled</div>
  <div v-else>Feature is disabled</div>
</template>
```

### Type safety

You can make the `identify` and the `useFeature` functions type safe by using the [code generator](/docs/code-generation), and defining the traits of your users and teams in the app.

---
_Source: https://npm.io/package/@unrevealed/vue · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._