---
title: "polar/client"
description: "Vue ports of @convex-dev/polar/react's billing components — CheckoutLink and CustomerPortalLink."
canonical_url: "https://nuxt-convex-module.dev/api-reference/reference/polar/client"
---
# polar/client

Vue ports of `@convex-dev/polar/react`'s billing components —
[CheckoutLink](#checkoutlink) and [CustomerPortalLink](#customerportallink).

## Interfaces

### PolarComponentApi

Defined in: [src/runtime/polar/vue/components.ts:44](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L44)

The subset of the Polar component's action references these components need —
a Vue port mirror of `@convex-dev/polar`'s `PolarComponentApi`
(`Pick<…, 'generateCheckoutLink' | 'generateCustomerPortalUrl'>`). Supplied
via the auto-provided `api.billing` namespace, or passed through `:polar-api`.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="generatecheckoutlink">
        
      </a>
      
       <code>
        generateCheckoutLink?
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , <a href="#checkoutargs">
        <code>
          CheckoutArgs
        </code>
      </a>
      
      , { <code>
        url
      </code>
      
      : <code>
        string
      </code>
      
      ; }>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L45" rel="nofollow">
        src/runtime/polar/vue/components.ts:45
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="generatecustomerportalurl">
        
      </a>
      
       <code>
        generateCustomerPortalUrl?
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-convex-module.dev/api-reference/reference/client#functionreference">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "action"
      </code>
      
      , <code>
        "public"
      </code>
      
      , { <code>
        returnUrl?
      </code>
      
      : <code>
        string
      </code>
      
      ; }, { <code>
        url
      </code>
      
      : <code>
        string
      </code>
      
      ; }>
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L46" rel="nofollow">
        src/runtime/polar/vue/components.ts:46
      </a>
    </td>
  </tr>
</tbody>
</table>

## Type Aliases

### CheckoutArgs

```ts
type CheckoutArgs = {
  productIds: string[];
  origin: string;
  successUrl: string;
  subscriptionId?: string;
  metadata?: Record<string, string>;
  trialInterval?: string | null;
  trialIntervalCount?: number | null;
  locale?: string;
};
```

Defined in: [src/runtime/polar/vue/components.ts:18](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L18)

Args of the Polar-generated `generateCheckoutLink` action. Mirrors the
argument shape `@convex-dev/polar`'s component exposes.

#### Properties

<table>
<thead>
  <tr>
    <th>
      Property
    </th>
    
    <th>
      Type
    </th>
    
    <th>
      Description
    </th>
    
    <th>
      Defined in
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <a id="productids">
        
      </a>
      
       <code>
        productIds
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
      <span>
        
      </span>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L19" rel="nofollow">
        src/runtime/polar/vue/components.ts:19
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="origin">
        
      </a>
      
       <code>
        origin
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L20" rel="nofollow">
        src/runtime/polar/vue/components.ts:20
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="successurl">
        
      </a>
      
       <code>
        successUrl
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L21" rel="nofollow">
        src/runtime/polar/vue/components.ts:21
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="subscriptionid">
        
      </a>
      
       <code>
        subscriptionId?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L22" rel="nofollow">
        src/runtime/polar/vue/components.ts:22
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="metadata">
        
      </a>
      
       <code>
        metadata?
      </code>
    </td>
    
    <td>
      <code>
        Record
      </code>
      
      <<code>
        string
      </code>
      
      , <code>
        string
      </code>
      
      >
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L23" rel="nofollow">
        src/runtime/polar/vue/components.ts:23
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="trialinterval">
        
      </a>
      
       <code>
        trialInterval?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
      
       | <code>
        null
      </code>
    </td>
    
    <td>
      `string
    </td>
    
    <td>
      null<code>
        — not the literal-day/week/month/year union — because upstream's action arg is validator-derived (
      </code>
      
      v.union(v.string(), v.null())<code>
        ), so the user's
      </code>
      
      _generated/api<code>
        reference types it that way; a narrower type here would reject their
      </code>
      
      :polar-api` binding. The component <em>
        prop
      </em>
      
       keeps the literal union, matching upstream's React prop declaration.
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="trialintervalcount">
        
      </a>
      
       <code>
        trialIntervalCount?
      </code>
    </td>
    
    <td>
      <code>
        number
      </code>
      
       | <code>
        null
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L32" rel="nofollow">
        src/runtime/polar/vue/components.ts:32
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="locale">
        
      </a>
      
       <code>
        locale?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      -
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L33" rel="nofollow">
        src/runtime/polar/vue/components.ts:33
      </a>
    </td>
  </tr>
</tbody>
</table>

## Variables

### CustomerPortalLink

```ts
const CustomerPortalLink: DefineComponent<ExtractPropTypes<{
  polarApi: {
     type: PropType<PolarComponentApi>;
     default: undefined;
  };
  returnUrl: {
     type: StringConstructor;
     default: undefined;
  };
}>, () => 
  | VNode<RendererNode, RendererElement, {
[key: string]: any;
}>
  | null, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{
  polarApi: {
     type: PropType<PolarComponentApi>;
     default: undefined;
  };
  returnUrl: {
     type: StringConstructor;
     default: undefined;
  };
}>, {
}>, {
  polarApi: PolarComponentApi;
  returnUrl: string;
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;
```

Defined in: [src/runtime/polar/vue/components.ts:60](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L60)

Renders a link to the Polar customer portal for the signed-in user, where
they manage their subscription.

#### Example

```vue
<CustomerPortalLink>Manage subscription</CustomerPortalLink>
```

---

### CheckoutLink

```ts
const CheckoutLink: DefineComponent<ExtractPropTypes<{
  polarApi: {
     type: PropType<PolarComponentApi>;
     default: undefined;
  };
  productIds: {
     type: PropType<string[]>;
     required: true;
  };
  subscriptionId: {
     type: StringConstructor;
     default: undefined;
  };
  metadata: {
     type: PropType<Record<string, string>>;
     default: undefined;
  };
  trialInterval: {
     type: PropType<"day" | "week" | "month" | "year" | null>;
     default: undefined;
  };
  trialIntervalCount: {
     type: PropType<number | null>;
     default: undefined;
  };
  locale: {
     type: StringConstructor;
     default: undefined;
  };
  theme: {
     type: PropType<"dark" | "light">;
     default: string;
  };
  embed: {
     type: BooleanConstructor;
     default: boolean;
  };
  lazy: {
     type: BooleanConstructor;
     default: boolean;
  };
}>, () => VNode<RendererNode, RendererElement, {
[key: string]: any;
}>, {
}, {
}, {
}, ComponentOptionsMixin, ComponentOptionsMixin, {
}, string, PublicProps, ToResolvedProps<ExtractPropTypes<{
  polarApi: {
     type: PropType<PolarComponentApi>;
     default: undefined;
  };
  productIds: {
     type: PropType<string[]>;
     required: true;
  };
  subscriptionId: {
     type: StringConstructor;
     default: undefined;
  };
  metadata: {
     type: PropType<Record<string, string>>;
     default: undefined;
  };
  trialInterval: {
     type: PropType<"day" | "week" | "month" | "year" | null>;
     default: undefined;
  };
  trialIntervalCount: {
     type: PropType<number | null>;
     default: undefined;
  };
  locale: {
     type: StringConstructor;
     default: undefined;
  };
  theme: {
     type: PropType<"dark" | "light">;
     default: string;
  };
  embed: {
     type: BooleanConstructor;
     default: boolean;
  };
  lazy: {
     type: BooleanConstructor;
     default: boolean;
  };
}>, {
}>, {
  polarApi: PolarComponentApi;
  subscriptionId: string;
  metadata: Record<string, string>;
  trialInterval: "day" | "week" | "month" | "year" | null;
  trialIntervalCount: number | null;
  locale: string;
  theme: "dark" | "light";
  embed: boolean;
  lazy: boolean;
}, {
}, {
}, {
}, string, ComponentProvideOptions, true, {
}, any>;
```

Defined in: [src/runtime/polar/vue/components.ts:115](https://github.com/qruto/nuxt-convex-module/blob/main/src/runtime/polar/vue/components.ts#L115)

Renders a checkout link. Supports embedded or redirect checkout, with optional lazy loading and trial configuration.

#### Example

```vue
<CheckoutLink :product-ids="[productId]" :trial-interval-count="7" trial-interval="day">
  Start free trial
</CheckoutLink>
```


## Sitemap

See the full [sitemap](https://nuxt-convex-module.dev/sitemap.md) for all pages.