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

# Nuxt

> Learn how to integrate Dub with Nuxt.

## 1. Prerequisites

To follow this guide, you will need to:

* [Create a Dub account](https://d.to/try)
* [Create an API key](https://app.dub.co/settings/tokens)

## 2. Install and initialize the Dub TypeScript SDK

### 1. Install

Install the [Dub TypeScript SDK](/docs/sdks/typescript) using your preferred package manager:

**npm**

```bash theme={null}
npm install dub
```

**yarn**

```bash theme={null}
yarn add dub zod # zod is a peer dependency
```

**pnpm**

```bash theme={null}
pnpm add dub 
```

### 2. Initialize

Then, initialize the Dub TypeScript SDK with your API key.

```typescript lib/dub.ts theme={null}
import { Dub } from "dub";

export const dub = new Dub({
  token: process.env.DUB_API_KEY, // optional, defaults to DUB_API_KEY env variable
});
```

You can now use the `dub` object to interact with the Dub API.

```typescript theme={null}
import { dub } from "./lib/dub";
```

## 3. Create link

Let's create a short link using the [Dub TypeScript SDK](/docs/sdks/typescript).

```typescript server/api/links.post.ts theme={null}
export default defineEventHandler(async () => {
  try {
    const result = await dub.links.create({
      url: "https://www.google.com",
    });

    return result;
  } catch (error) {
    console.error(error);
    return error;
  }
});
```

Optionally, you can also pass an `externalId` field which is a unique identifier for the link in your own database to associate it with the link in Dub's system.

```typescript server/api/links.post.ts theme={null}
export default defineEventHandler(async () => {
  try {
    const result = await dub.links.create({
      url: "https://www.google.com",
      externalId: "12345",
    });

    return result;
  } catch (error) {
    console.error(error);
    return error;
  }
});
```

This will let you easily [update the link](#5-update-link) or [retrieve analytics](#6-retrieve-analytics-for-link) for it later on using the `externalId` instead of the Dub `linkId`.

## 4. Upsert link

Dub TypeScript SDK provides a method to upsert a link – where an existing link is updated if it exists, or a new link is created if it doesn't. so you don't have to worry about checking if the link already exists.

```typescript server/api/links.put.ts theme={null}
export default defineEventHandler(async () => {
  try {
    const result = await dub.links.upsert({
      url: "https://www.google.com",
    });

    return result;
  } catch (error) {
    console.error(error);
    return error;
  }
});
```

This way, you won't have to worry about checking if the link already exists when you're creating it.

## 5. Update link

Let's update an existing link using the Dub TypeScript SDK.

You can do that in two ways:

* Using the link's `linkId` in Dub's system.
* Using the link's `externalId` in your own database (prefixed with `ext_`).

```typescript server/api/links.patch.ts theme={null}
export default defineEventHandler(async () => {
  try {
    // Update a link by its linkId
    const { shortLink } = await dub.links.update(
      "link_rWOKByP0bRMrstK8e4HPjprJ",
      {
        url: "https://www.google.uk", // new URL
      }
    );

    // Update a link by its externalId
    const { shortLink } = await dub.links.update("ext_12345", {
      url: "https://www.google.uk", // new URL
    });

    return { shortLink };
  } catch (error) {
    console.error(error);
    return error;
  }
});
```

## 6. Retrieve analytics for link

Dub allows you to retrieve analytics for a link using the Dub TypeScript SDK.

```typescript server/api/analytics.get.ts theme={null}
import { ClicksTimeseries } from "dub/models/components";

export default defineEventHandler(async () => {
  try {
    // Retrieve the timeseries analytics for the last 7 days for a link
    const response = await dub.analytics.retrieve({
      linkId: "clv3o9p9q000au1h0mc7r6l63",
      interval: "7d",
      groupBy: "timeseries",
    });

    const timeseries = response as ClicksTimeseries[];

    return timeseries;
  } catch (error) {
    console.error(error);
    return error;
  }
});
```

Similarly, you can retrieve analytics for a link using the `externalId` field.

```typescript server/api/analytics.get.ts theme={null}
// Retrieve the timeseries analytics for the last 7 days for a link
const response = await dub.analytics.retrieve({
  externalId: "ext_12345",
  interval: "7d",
  groupBy: "timeseries",
});

const timeseries = response as ClicksTimeseries[];
```

## 7. Examples

> **[Nuxt.js Example](https://github.com/dubinc/examples/tree/main/typescript/nuxt)**
>
> See the full example on GitHub.


This documentation is built and hosted on [Mintlify](https://mintlify.com), a developer documentation platform.