# 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
npm install @unkey/nuxt
```

```bash pnpm
pnpm add @unkey/nuxt
```

```bash yarn
yarn add @unkey/nuxt
```

```bash bun
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
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.
1. 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
    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
    <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
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
const unkey = useUnkey({ disableTelemetry: true });
```