# Nuxt quickstart

## 1. Install `hypertune`

Once you have a Nuxt application ready, install Hypertune's JavaScript SDK:

{% tabs %}
{% tab title="npm" %}

```bash
npm install hypertune
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn add hypertune
```

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm add hypertune
```

{% endtab %}
{% endtabs %}

## 2. Set environment variables

Define the following environment variables in your `.env` file:

{% code title=".env" %}

```bash
HYPERTUNE_TOKEN=token
HYPERTUNE_FRAMEWORK=vue
HYPERTUNE_OUTPUT_DIRECTORY_PATH=generated
```

{% endcode %}

Replace `token` with your main project token which you can find in the Settings tab of your project.

## 3. Generate the client

Generate a type-safe client to access your flags by running:

{% tabs %}
{% tab title="npm" %}

```bash
npx hypertune
```

{% endtab %}

{% tab title="yarn" %}

```bash
yarn hypertune
```

{% endtab %}

{% tab title="pnpm" %}

```bash
pnpm hypertune
```

{% endtab %}
{% endtabs %}

## 4. Use the client

Add `hypertuneToken` to `runtimeConfig` in your `nuxt.config.ts` :

{% code title="nuxt.config.ts" %}

```typescript
export default defineNuxtConfig({
  runtimeConfig: {
    public: {
      hypertuneToken: process.env.HYPERTUNE_TOKEN!,
    },
  },
});
```

{% endcode %}

Then add a plugin for Hypertune to your app:

{% code title="plugins/hypertune.ts" %}

```typescript
import {
  type DehydratedState,
  type RootArgs,
  createSourceForServerOnly,
} from '~/generated/hypertune'
import {
  hypertunePlugin,
  hypertuneKey,
} from '~/generated/hypertune.vue'

const hypertuneSource = createSourceForServerOnly({
  token: process.env.HYPERTUNE_TOKEN!,
  shouldRefreshInitData: false,
})

export default defineNuxtPlugin(async (nuxtApp) => {
  let serverData: {
    dehydratedState: DehydratedState | null
    rootArgs: RootArgs
  }

  if (import.meta.server) {
    await hypertuneSource.initIfNeeded() // Check for flag updates

    const rootArgs = computed<RootArgs>(() => {
      return {
        context: {
          environment: 'development',
          user: {
            id: 'e23cc9a8-0287-40aa-8500-6802df91e56a',
            name: 'Example User',
            email: 'user@example.com',
          },
        },
      }
    })

    const hypertune = computed(() =>
      hypertuneSource.root({ args: rootArgs.value })
    )
    nuxtApp.vueApp.provide(hypertuneKey, hypertune)

    serverData = {
      dehydratedState: hypertune.value.dehydrate(),
      rootArgs: hypertune.value.getRootArgs(),
    }
  }

  useHydration(
    'hypertune',
    () => serverData,
    ({ dehydratedState, rootArgs }) => {
      const runtimeConfig = useRuntimeConfig()
      nuxtApp.vueApp.use(hypertunePlugin, {
        createSourceOptions: {
          token: runtimeConfig.public.hypertuneToken,
        },
        dehydratedState,
        rootArgs,
      })
    }
  )
})
```

{% endcode %}

Then use the generated `useHypertune` composable to access your flags:

{% code title="components/Example.vue" %}

```tsx
<script setup lang="ts">
import { useHypertune } from "~/generated/hypertune.vue";

const hypertune = useHypertune();
</script>

<template>
  <div>
    Example Flag:
    {{ hypertune.exampleFlag({ fallback: false }) }}
  </div>
</template>
```

{% endcode %}

If you have a Content Security Policy, add the following to your `connect-src` directive: `https://edge.hypertune.com https://gcp.fasthorse.workers.dev`. This enables reporting of flag evaluations, experiment exposures, and analytics events.

## 5. (Optional) Include a build-time snapshot

To improve reliability, you can include a snapshot of your flag logic in the generated client at build time. The SDK will instantly initialize from the snapshot first before fetching the latest flag logic from [Hypertune Edge](https://docs.hypertune.com/concepts/hypertune-edge).

Add the following environment variable to your `.env` file:

{% code title=".env" %}

```bash
HYPERTUNE_INCLUDE_INIT_DATA=true
```

{% endcode %}

Then run `npx hypertune` to regenerate the client.

You can keep the snapshot fresh by setting up a [webhook](https://docs.hypertune.com/integrations/webhooks) to regenerate the client on every Hypertune commit. In this case, you don't need to initialize from Hypertune Edge at all, eliminating network latency and bandwidth, improving both performance and efficiency.

## Next steps

Now you can update the logic for `exampleFlag` from the Hypertune UI without updating your code or waiting for a new build, deployment, or app release.

To add a new flag, create it in the Hypertune UI then regenerate the client.