> ## Documentation Index
> Fetch the complete documentation index at: https://unkey.com/docs/llms.txt
> Use this file to discover all available pages before exploring further.

# Nuxt Module

> Integrate Unkey API key authentication into your Nuxt application with the official Nuxt module. Protect server routes and API endpoints.

If you are using Nuxt, you can benefit from an almost zero-config experience with the `@unkey/nuxt` module.

## Install

<CodeGroup>
  ```bash npm theme={"theme":"kanagawa-wave"}
  npm install @unkey/nuxt
  ```

  ```bash pnpm theme={"theme":"kanagawa-wave"}
  pnpm add @unkey/nuxt
  ```

  ```bash yarn theme={"theme":"kanagawa-wave"}
  yarn add @unkey/nuxt
  ```

  ```bash bun theme={"theme":"kanagawa-wave"}
  bun install @unkey/nuxt
  ```
</CodeGroup>

## Configuration

`@unkey/nuxt` just requires your root key. Create an `.env` file in your project and add the following:

```env theme={"theme":"kanagawa-wave"}
NUXT_UNKEY_TOKEN=<your api key>
```

This can also be configured at runtime by setting the `NUXT_UNKEY_TOKEN` environment variable.

From this point onward, `@unkey/nuxt` will automatically:

1. verify any API requests with an `Authorization: Bearer xxx` header.
2. register a `useUnkey()` helper that allows access to an automatically configured unkey instance.

## Usage

### Automatic verification

You can access the automatically-verified `unkey` context on the server with `event.context.unkey` in your server routes or `useRequestEvent().context.unkey` in the Vue part of your app.

For example:

<Tabs>
  <Tab title="~/server/api/test.ts">
    ```ts theme={"theme":"kanagawa-wave"}
    export default defineEventHandler(async (event) => {
      if (!event.context.unkey.valid) {
        throw createError({ statusCode: 403, message: "Invalid API key" })
      }

      // return authorised information
      return {
        // ...
      };
    });
    ```
  </Tab>

  <Tab title="~/app.vue">
    ```html theme={"theme":"kanagawa-wave"}
    <template>
      <div>
        <pre>Was verified: {{ wasVerified }}</pre>
      </div>
    </template>

    <script setup>
    const wasVerified = useState(() => ({ unkey: useRequestEvent()?.context?.unkey.valid }))
    </script>
    ```
  </Tab>
</Tabs>

## Unkey helper

For more about how to use the configured helper provided by `useUnkey()`, you can see the API docs for [the TypeScript client](/libraries/ts/api).

For example:

```ts theme={"theme":"kanagawa-wave"}
const unkey = useUnkey();

try {
  const { meta, data } = await unkey.keys.createKey({
    apiId: "api_7oKUUscTZy22jmVf9THxDA",
    prefix: "xyz",
    byteLength: 16,
    externalId: "user_123", // Link to your user
    meta: {
      hello: "world",
    },
    expires: Date.now() + 30 * 24 * 60 * 60 * 1000, // 30 days from now
    ratelimit: {
      limit: 10,
      duration: 1000, // 10 requests per second
    },
  });

  console.log(data.key);
} catch (err) {
  console.error(err);
  throw err;
}
```

### Disable telemetry

By default, Unkey collects anonymous telemetry data to help us understand how our SDKs are used.

If you wish to disable this, you can do so by passing a boolean flag to the constructor:

```ts theme={"theme":"kanagawa-wave"}
const unkey = useUnkey({ disableTelemetry: true });
```