### Run Development Server

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/README.md

Use this command to start the development server for nuxt-unleash. Ensure you have pnpm installed.

```bash
pnpm dev
```

--------------------------------

### Development Setup Commands

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/README.md

Commands for setting up the development environment, including installing dependencies, preparing the project, running the playground, and executing tests or linting.

```bash
pnpm install
pnpm dev:prepare
pnpm dev           # Start playground
pnpm test          # Run tests
pnpm lint          # Lint
```

--------------------------------

### Install NuxtHub Core

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/2.storage/2.nuxthub.md

Install the NuxtHub core package using pnpm.

```bash
pnpm add @nuxthub/core
```

--------------------------------

### API Endpoint Example

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/4.server/1.api-route.md

This is the GET endpoint used by the client plugin for polling feature flag states.

```http
GET /api/_unleash/flags
```

--------------------------------

### Install nuxt-unleash with package managers

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/1.getting-started/1.installation.md

Add the nuxt-unleash package to your project using your preferred package manager.

```bash
pnpm add @adamkasper/nuxt-unleash
```

```bash
npm install @adamkasper/nuxt-unleash
```

```bash
yarn add @adamkasper/nuxt-unleash
```

--------------------------------

### Verify nuxt-unleash installation with composable

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/1.getting-started/1.installation.md

Use the `useFlagsStatus` composable in your Vue components to check the readiness and count of feature flags. The module starts gracefully with empty flags if the proxy is unreachable.

```vue
<template>
  <div>
    <p>Flags ready: {{ ready }}</p>
    <p>Flag count: {{ flagCount }}</p>
  </div>
</template>

<script setup>
const { ready, flagCount } = useFlagsStatus()
</script>
```

--------------------------------

### Usage Example

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/4.use-flags-status.md

Use `useFlagsStatus` in your Vue component to conditionally display content based on the feature flag system's readiness. The `ready` ref indicates if flags have been fetched, and `flagCount` shows how many are loaded.

```vue
<template>
  <div v-if="!ready">Loading feature flags...</div>
  <div v-else>{{ flagCount }} flags loaded</div>
</template>

<script setup>
const { ready, flagCount } = useFlagsStatus()
</script>
```

--------------------------------

### Add @adamkasper/nuxt-unleash Module

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/README.md

Install the module using npm or npx. This is the first step to integrate Unleash feature flags into your Nuxt.js project.

```bash
npx nuxt module add @adamkasper/nuxt-unleash
```

--------------------------------

### Nuxt Config Setup for Memory Storage

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/2.storage/4.memory.md

Configure Nuxt Unleash to use the default memory storage by specifying your Unleash API URL, frontend token, and app name in the nuxt.config.ts file. No explicit storage configuration is needed as 'memory' is the default.

```typescript
export default defineNuxtConfig({
  modules: ['@adamkasper/nuxt-unleash'],

  unleash: {
    url: 'https://your-proxy.example.com/api/frontend',
    token: 'your-frontend-token',
    appName: 'my-app',
  },
})
```

--------------------------------

### Get a Variant for A/B Testing in Vue

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/README.md

Utilize the `useVariant` composable to implement A/B testing. It returns a variant object, allowing you to render different components based on the assigned variant.

```vue
<script setup>
const variant = useVariant('checkout-experiment')
</script>

<template>
  <CheckoutA v-if="variant.name === 'treatment-a'" />
  <CheckoutB v-else-if="variant.name === 'treatment-b'" />
  <CheckoutDefault v-else />
</template>
```

--------------------------------

### Get Flags

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/4.server/1.api-route.md

This endpoint retrieves the current status of all feature flags. It is used internally by the client plugin for polling and is not typically called directly by users. The response includes flag details, a timestamp of the last update, and a ready status.

```APIDOC
## GET /api/_unleash/flags

### Description
Retrieves the current status of all feature flags for client-side polling.

### Method
GET

### Endpoint
/api/_unleash/flags

### Response
#### Success Response (200)
- **toggles** (object) - An object containing the state of each feature flag.
  - **my-flag** (object) - Details of a specific feature flag.
    - **name** (string) - The name of the feature flag.
    - **enabled** (boolean) - Whether the flag is enabled.
    - **variant** (object) - The variant configuration for the flag.
      - **name** (string) - The name of the variant.
      - **enabled** (boolean) - Whether the variant is enabled.
- **lastUpdated** (number) - Timestamp of the last flag update.
- **ready** (boolean) - Indicates if the flags are ready to be used.

### Response Example
```json
{
  "toggles": {
    "my-flag": {
      "name": "my-flag",
      "enabled": true,
      "variant": {
        "name": "default",
        "enabled": false
      }
    }
  },
  "lastUpdated": 1712436000000,
  "ready": true
}
```
```

--------------------------------

### Build Project

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/README.md

Execute this command to build the nuxt-unleash project for production. pnpm is the required package manager.

```bash
pnpm build
```

--------------------------------

### Configure NuxtHub and Nuxt Unleash

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/2.storage/2.nuxthub.md

Configure NuxtHub KV as the storage backend for Nuxt Unleash in your nuxt.config.ts file. Ensure `@nuxthub/core` is listed before `@adamkasper/nuxt-unleash` in the modules array.

```typescript
export default defineNuxtConfig({
  modules: ['@nuxthub/core', '@adamkasper/nuxt-unleash'],

  hub: {
    kv: true,
  },

  unleash: {
    url: 'https://your-proxy.example.com/api/frontend',
    token: 'your-frontend-token',
    appName: 'my-app',
    storage: 'nuxthub',
  },
})
```

--------------------------------

### Configure Nuxt Unleash Module

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/1.getting-started/2.configuration.md

Set up the nuxt-unleash module in your `nuxt.config.ts` file. This includes essential parameters like the Unleash Proxy URL, API token, application name, and environment.

```typescript
export default defineNuxtConfig({
  unleash: {
    url: 'https://your-proxy.example.com/api/frontend',
    token: 'your-frontend-api-token',
    appName: 'my-app',
    environment: 'default',
    refreshInterval: 15000,
    clientRefreshInterval: 30000,
    storage: 'memory',
    storageKey: 'unleash:flags',
  },
})
```

--------------------------------

### Configure Nuxt Unleash with Nitro Storage

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/2.storage/3.nitro.md

Set up Nuxt Unleash to use Nitro's storage with a specific driver. Use `devStorage` to override the driver during local development with a memory driver.

```typescript
export default defineNuxtConfig({
  modules: ['@adamkasper/nuxt-unleash'],

  unleash: {
    url: 'https://your-proxy.example.com/api/frontend',
    token: 'your-frontend-token',
    appName: 'my-app',
    storage: 'nitro',
  },

  nitro: {
    storage: {
      unleash: {
        driver: 'cloudflare-kv-binding',
        binding: 'UNLEASH_CACHE',
      },
    },
    devStorage: {
      unleash: {
        driver: 'memory',
      },
    },
  },
})
```

--------------------------------

### Configure nuxt-unleash with environment variables

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/1.getting-started/1.installation.md

Override module options using NUXT_UNLEASH_* environment variables. This is useful for managing different configurations across environments.

```bash
NUXT_UNLEASH_URL=https://your-proxy.example.com/api/frontend
NUXT_UNLEASH_TOKEN=your-frontend-api-token
NUXT_UNLEASH_APP_NAME=my-app
```

--------------------------------

### Configure Filesystem for Nitro Development Storage

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/2.storage/3.nitro.md

Configure Nitro's storage to use the filesystem driver for development. This is useful for local testing without external services.

```typescript
nitro: {
  storage: {
    unleash: {
      driver: 'fs',
      base: './.data/unleash',
    },
  },
}
```

--------------------------------

### Configure Nuxt.js with Unleash

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/README.md

Configure the Unleash module in your nuxt.config.ts file. Ensure you provide the Unleash Proxy Frontend API URL, a frontend API token, and your application name.

```typescript
export default defineNuxtConfig({
  modules: ['@adamkasper/nuxt-unleash'],
  unleash: {
    url: 'https://your-unleash-proxy.example.com/api/frontend',
    token: 'your-frontend-api-token',
    appName: 'my-app',
  },
})
```

--------------------------------

### useFlagsStatus

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/4.use-flags-status.md

Returns reactive status information about the feature flag system. It indicates whether the system is ready and how many flags have been loaded.

```APIDOC
## useFlagsStatus()

### Description
Check initialization status of feature flags.

### Returns
- **ready** (ComputedRef<boolean>) - `true` after the first successful flag fetch. `false` if the Unleash proxy is unreachable.
- **flagCount** (ComputedRef<number>) - Number of loaded feature flags.
```

--------------------------------

### Configure Cloudflare KV Binding for Nitro Storage

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/2.storage/3.nitro.md

Configure Nitro's storage to use the Cloudflare KV binding driver. This requires specifying the driver and the binding name.

```typescript
nitro: {
  storage: {
    unleash: {
      driver: 'cloudflare-kv-binding',
      binding: 'UNLEASH_CACHE',
    },
  },
}
```

--------------------------------

### Using useVariant in a Vue Component

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/2.use-variant.md

Demonstrates how to use the `useVariant` composable to dynamically render different components based on the feature flag's variant. Ensure the `useVariant` composable is imported and available in your component's scope.

```vue
<template>
  <component :is="buttonComponent" />
</template>

<script setup>
const variant = useVariant('checkout-button')

const buttonComponent = computed(() => {
  switch (variant.value.name) {
    case 'blue': return BlueButton
    case 'green': return GreenButton
    default: return DefaultButton
  }
})
</script>
```

--------------------------------

### useAllFlags

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/3.use-all-flags.md

Returns a reactive record of all feature flags. Useful for debugging or bulk flag inspection.

```APIDOC
## useAllFlags()

### Description
Get all evaluated feature flags. Returns a reactive record of all feature flags, useful for debugging or bulk flag inspection.

### Returns
`ComputedRef<Record<string, EvaluatedFlag>>` - all flags keyed by name. Returns `{}` if no flags are loaded.

### Type
```ts
function useAllFlags(): ComputedRef<Record<string, EvaluatedFlag>>

interface EvaluatedFlag {
  name: string
  enabled: boolean
  variant: Variant
}
```

### Usage
```vue
<template>
  <pre>{{ JSON.stringify(allFlags, null, 2) }}</pre>
</template>

<script setup>
const allFlags = useAllFlags()
</script>
```
```

--------------------------------

### Configure Upstash Redis for Nitro Storage

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/2.storage/3.nitro.md

Configure Nitro's storage to use the Upstash Redis driver. This requires the Redis URL and token, typically sourced from environment variables.

```typescript
nitro: {
  storage: {
    unleash: {
      driver: 'upstash',
      url: process.env.UPSTASH_REDIS_REST_URL,
      token: process.env.UPSTASH_REDIS_REST_TOKEN,
    },
  },
}
```

--------------------------------

### Add nuxt-unleash to Nuxt configuration

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/1.getting-started/1.installation.md

Configure the nuxt-unleash module in your nuxt.config.ts file. Ensure the `url` points to your Unleash Proxy's Frontend API endpoint.

```typescript
export default defineNuxtConfig({
  modules: ['@adamkasper/nuxt-unleash'],

  unleash: {
    url: 'https://your-unleash-proxy.example.com/api/frontend',
    token: 'your-frontend-api-token',
    appName: 'my-app',
  },
})
```

--------------------------------

### Check Flag Loading Status in Vue

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/README.md

Use the `useFlagsStatus` composable to monitor the loading state of feature flags. It returns an object containing `ready` status and `flagCount`.

```vue
<script setup>
const { ready, flagCount } = useFlagsStatus()
</script>

<template>
  <div v-if="!ready">
    Loading flags...
  </div>

  <div v-else>
    {{ flagCount }} flags loaded
  </div>
</template>
```

--------------------------------

### useUnleashFlags

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/4.server/2.server-utils.md

Reads flags from storage with stale-while-revalidate. Use this in server routes, middleware, or API handlers.

```APIDOC
## useUnleashFlags

### Description
Reads flags from storage with stale-while-revalidate. Use this in server routes, middleware, or API handlers.

### Type
```ts
function useUnleashFlags(): Promise<CachedFlags>

interface CachedFlags {
  toggles: Record<string, EvaluatedFlag>
  lastUpdated: number
}
```

### Example
```ts
export default defineEventHandler(async () => {
  const { toggles } = await useUnleashFlags()

  if (toggles['premium-api']?.enabled) {
    return { tier: 'premium', data: getPremiumData() }
  }

  return { tier: 'free', data: getFreeData() }
})
```
```

--------------------------------

### useFlag()

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/1.use-flag.md

Checks if a feature flag is enabled. Returns a reactive boolean indicating whether a flag is enabled.

```APIDOC
## useFlag(name: string)

### Description
Checks if a feature flag is enabled. Returns a reactive boolean indicating whether a flag is enabled.

### Parameters
#### Path Parameters
- **name** (string) - Required - The feature flag name as defined in Unleash.

### Returns
`ComputedRef<boolean>` - `true` if the flag is enabled, `false` otherwise. Returns `false` for unknown flags.
```

--------------------------------

### Debug All Flags

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/README.md

Retrieve all evaluated flags using the `useAllFlags` composable. The result is a computed object containing flag names and their evaluation details.

```javascript
const allFlags = useAllFlags()
console.log(allFlags.value)
// { 'my-flag': { name, enabled, variant }, ... }
```

--------------------------------

### API Response Structure

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/4.server/1.api-route.md

This JSON structure represents the response from the /api/_unleash/flags endpoint, detailing feature flag states and update information.

```json
{
  "toggles": {
    "my-flag": {
      "name": "my-flag",
      "enabled": true,
      "variant": {
        "name": "default",
        "enabled": false
      }
    }
  },
  "lastUpdated": 1712436000000,
  "ready": true
}
```

--------------------------------

### Server-side Flag Checks in Nuxt API Route

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/README.md

Perform server-side flag checks within your Nuxt API routes using the `useUnleashFlags` server utility. This allows for dynamic API responses based on feature flags.

```typescript
// server/api/my-route.ts
export default defineEventHandler(async () => {
  const { toggles } = await useUnleashFlags()

  if (toggles['premium-api']?.enabled) {
    return { tier: 'premium' }
  }
  return { tier: 'free' }
})
```

--------------------------------

### useVariant() Function Signature and Variant Interface

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/2.use-variant.md

Provides the type definition for the `useVariant` composable and the `Variant` interface it returns. This helps in understanding the expected input and output types for managing feature flag variants.

```typescript
function useVariant(name: string): ComputedRef<Variant>

interface Variant {
  name: string
  enabled: boolean
  payload?: { type: string; value: string }
}
```

--------------------------------

### Type Definition for Refresh Options

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/4.server/2.server-utils.md

Defines the options for the `refreshUnleashFlags` function, including the ability to force a refresh.

```typescript
function refreshUnleashFlags(options?: {
  force?: boolean
}): Promise<CachedFlags | null>

// Skip the deduplication lock and force a fresh fetch.
```

--------------------------------

### refreshUnleashFlags

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/4.server/2.server-utils.md

Force a refresh of flags from the Unleash Proxy. Useful for webhooks or admin endpoints.

```APIDOC
## refreshUnleashFlags

### Description
Force a refresh of flags from the Unleash Proxy. Useful for webhooks or admin endpoints.

### Type
```ts
function refreshUnleashFlags(options?: {
  force?: boolean
}): Promise<CachedFlags | null>
```

### Parameters
#### Query Parameters
- **force** (boolean) - Optional - Skip the deduplication lock and force a fresh fetch.

### Example
```ts
export default defineEventHandler(async () => {
  await refreshUnleashFlags({ force: true })
  return { ok: true }
})
```
```

--------------------------------

### useFlag() Type Signature

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/1.use-flag.md

The `useFlag` composable accepts a string representing the feature flag name and returns a `ComputedRef<boolean>`. This type signature clarifies the expected input and output.

```typescript
function useFlag(name: string): ComputedRef<boolean>
```

--------------------------------

### Display All Flags

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/3.use-all-flags.md

Use this composable in your Vue templates to display all evaluated feature flags. It returns a computed reference that can be directly used to inspect flag states.

```vue
<template>
  <pre>{{ JSON.stringify(allFlags, null, 2) }}</pre>
</template>

<script setup>
const allFlags = useAllFlags()
</script>
```

--------------------------------

### useVariant

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/2.use-variant.md

Retrieves the variant of a feature flag. This is useful for implementing A/B tests or serving different content based on feature flag variants.

```APIDOC
## useVariant

### Description
Retrieves the variant of a feature flag. This is useful for implementing A/B tests or serving different content based on feature flag variants.

### Signature
```typescript
function useVariant(name: string): ComputedRef<Variant>
```

### Parameters
#### Path Parameters
- **name** (string) - Required - The name of the feature flag.

### Returns
`ComputedRef<Variant>` - The variant object. Returns `{ name: 'disabled', enabled: false }` for unknown flags.

### Type
```typescript
interface Variant {
  name: string
  enabled: boolean
  payload?: { type: string; value: string }
}
```

### Usage Example
```vue
<template>
  <component :is="buttonComponent" />
</template>

<script setup>
const variant = useVariant('checkout-button')

const buttonComponent = computed(() => {
  switch (variant.value.name) {
    case 'blue': return BlueButton
    case 'green': return GreenButton
    default: return DefaultButton
  }
})
</script>
```
```

--------------------------------

### useFlagsStatus() Type Definition

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/4.use-flags-status.md

This is the TypeScript type definition for the `useFlagsStatus` composable. It returns an object containing two computed properties: `ready` (a boolean indicating initialization status) and `flagCount` (a number representing the count of loaded flags).

```typescript
function useFlagsStatus(): {
  ready: ComputedRef<boolean>
  flagCount: ComputedRef<number>
}
```

--------------------------------

### Conditional Rendering with useFlag

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/1.use-flag.md

Use `useFlag` to conditionally render different UI sections based on a feature flag's status. The composable returns a reactive boolean that can be directly used in `v-if` directives.

```vue
<template>
  <div v-if="showNewDashboard">
    <NewDashboard />
  </div>
  <div v-else>
    <LegacyDashboard />
  </div>
</template>

<script setup>
const showNewDashboard = useFlag('new-dashboard')
</script>
```

--------------------------------

### Use Unleash Flags in API Route

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/4.server/2.server-utils.md

Reads feature flags from storage with stale-while-revalidate caching. Use this in server routes, middleware, or API handlers to conditionally serve content based on feature flag status.

```typescript
export default defineEventHandler(async () => {
  const { toggles } = await useUnleashFlags()

  if (toggles['premium-api']?.enabled) {
    return { tier: 'premium', data: getPremiumData() }
  }

  return { tier: 'free', data: getFreeData() }
})
```

--------------------------------

### Check if a Flag is Enabled in Vue

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/README.md

Use the `useFlag` composable to conditionally render content based on a feature flag's status. This composable returns a computed boolean.

```vue
<script setup>
const showBanner = useFlag('new-banner')
</script>

<template>
  <div v-if="showBanner">
    Welcome to the new experience!
  </div>
</template>
```

--------------------------------

### useAllFlags() Type Definition

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/3.composables/3.use-all-flags.md

The `useAllFlags` composable returns a `ComputedRef` containing a record of `EvaluatedFlag` objects, keyed by flag name. Each `EvaluatedFlag` includes its name, enabled status, and associated variant.

```typescript
function useAllFlags(): ComputedRef<Record<string, EvaluatedFlag>>

interface EvaluatedFlag {
  name: string
  enabled: boolean
  variant: Variant
}
```

--------------------------------

### Refresh Unleash Flags in API Route

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/4.server/2.server-utils.md

Force a refresh of feature flags from the Unleash Proxy. This is useful for handling webhooks or in admin endpoints where an immediate flag update is required.

```typescript
export default defineEventHandler(async () => {
  await refreshUnleashFlags({ force: true })
  return { ok: true }
})
```

--------------------------------

### Type Definition for CachedFlags

Source: https://github.com/adamkasper/nuxt-unleash/blob/main/docs/content/docs/4.server/2.server-utils.md

Defines the structure of the cached feature flags object returned by `useUnleashFlags` and `refreshUnleashFlags`.

```typescript
function useUnleashFlags(): Promise<CachedFlags>

interface CachedFlags {
  toggles: Record<string, EvaluatedFlag>
  lastUpdated: number
}
```

=== COMPLETE CONTENT === This response contains all available snippets from this library. No additional content exists. Do not make further requests.