Nuxt

Learn how to integrate CodeQR with Nuxt.

1. Prerequisites

To follow this guide, you will need to:

• Create a CodeQR account
• Create an API key

2. Install and initialize the CodeQR TypeScript SDK

1. Install

   Install the CodeQR TypeScript SDK using your preferred package manager:

   npm

   npm install codeqr
   

2. Initialize

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

   lib/codeqr.ts

   import { CodeQR } from "codeqr";
   
   export const codeqr = new CodeQR({
     token: process.env.CODEQR_API_KEY, // optional, defaults to CODEQR_API_KEY env variable
   });
   

   You can now use the codeqr object to interact with the CodeQR API.

   import { codeqr } from "./lib/codeqr";
   

3. Create link

Let’s create a short link using the CodeQR TypeScript SDK.

server/api/links.post.ts

export default defineEventHandler(async () => {
  try {
    const result = await codeqr.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 CodeQR’s system.

server/api/links.post.ts

export default defineEventHandler(async () => {
  try {
    const result = await codeqr.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 or retrieve analytics for it later on using the externalId instead of the CodeQR linkId.

4. Upsert link

CodeQR 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.

server/api/links.put.ts

export default defineEventHandler(async () => {
  try {
    const result = await codeqr.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 CodeQR TypeScript SDK.

You can do that in two ways:

• Using the link’s linkId in CodeQR’s system.
• Using the link’s externalId in your own database (prefixed with ext_).

server/api/links.patch.ts

export default defineEventHandler(async () => {
  try {
    // Update a link by its linkId
    const { shortLink } = await codeqr.links.update(
      "link_rWOKByP0bRMrstK8e4HPjprJ",
      {
        url: "https://www.google.uk", // new URL
      }
    );

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

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

server/api/analytics.get.ts

import { ClicksTimeseries } from "codeqr/models/components";

export default defineEventHandler(async () => {
  try {
    // Retrieve the timeseries analytics for the last 7 days for a link
    const response = await codeqr.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.

server/api/analytics.get.ts

// Retrieve the timeseries analytics for the last 7 days for a link
const response = await codeqr.analytics.retrieve({
  externalId: "ext_12345",
  interval: "7d",
  groupBy: "timeseries",
});

const timeseries = response as ClicksTimeseries[];

7. Examples

Nuxt.js Example

See the full example on GitHub.