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

# Nuxt

> Learn how to integrate Pearset with Nuxt.

## 1. Prerequisites

To follow this guide, you will need to:

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

## 2. Install and initialize the Pearset TypeScript SDK

<Steps titleSize="h3">
  <Step title="Install">
    Install the [Pearset TypeScript SDK](/docs/sdks/typescript) using your preferred package manager:

    <Tabs>
      <Tab title="npm">
        ```bash theme={null}
        npm install pearset
        ```
      </Tab>

      <Tab title="yarn">
        ```bash theme={null}
        yarn add pearset zod # zod is a peer dependency
        ```
      </Tab>

      <Tab title="pnpm">
        ```bash theme={null}
        pnpm add pearset 
        ```
      </Tab>
    </Tabs>
  </Step>

  <Step title="Initialize">
    Then, initialize the Pearset TypeScript SDK with your API key.

    ```typescript lib/pearset.ts theme={null}
    import { Pearset } from "pearset";

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

    You can now use the `pearset` object to interact with the Pearset API.

    ```typescript theme={null}
    import { pearset } from "./lib/pearset";
    ```
  </Step>
</Steps>

## 3. Create link

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

```typescript server/api/links.post.ts theme={null}
export default defineEventHandler(async () => {
  try {
    const result = await pearset.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 Pearset's system.

```typescript server/api/links.post.ts theme={null}
export default defineEventHandler(async () => {
  try {
    const result = await pearset.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 Pearset `linkId`.

## 4. Upsert link

Pearset 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 pearset.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 Pearset TypeScript SDK.

You can do that in two ways:

* Using the link's `linkId` in Pearset'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 pearset.links.update(
      "link_rWOKByP0bRMrstK8e4HPjprJ",
      {
        url: "https://www.google.uk", // new URL
      }
    );

    // Update a link by its externalId
    const { shortLink } = await pearset.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

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

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

export default defineEventHandler(async () => {
  try {
    // Retrieve the timeseries analytics for the last 7 days for a link
    const response = await pearset.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 pearset.analytics.retrieve({
  externalId: "ext_12345",
  interval: "7d",
  groupBy: "timeseries",
});

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

## 7. Examples

<CardGroup cols={2}>
  <Card title="Nuxt.js Example" icon="github" href="https://github.com/pearset/examples/tree/main/typescript/nuxt" color="#333333">
    See the full example on GitHub.
  </Card>
</CardGroup>