---
title: "useGifts"
description: "useGifts, auto-imported in the app: its options, return value and types."
canonical_url: "https://nuxt-backend.dev/docs/reference/api/use-gifts"
---
# useGifts

## Interfaces

### UseGiftsOptions

Defined in: [src/runtime/vue/composables/use-gifts.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts)

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="api">
        
      </a>
      
       <code>
        api?
      </code>
    </td>
    
    <td>
      <a href="https://nuxt-backend.dev/docs/reference/api/use-billing#billingapi">
        <code>
          BillingApi
        </code>
      </a>
    </td>
    
    <td>
      Override the injected <code>
        api.billing
      </code>
      
       namespace.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts" rel="nofollow">
        src/runtime/vue/composables/use-gifts.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### ClaimGiftOptions

Defined in: [src/runtime/vue/composables/use-gifts.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts)

Per-call options for [UseGiftsReturn.claim](#claim).

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="successurl">
        
      </a>
      
       <code>
        successUrl?
      </code>
    </td>
    
    <td>
      <code>
        string
      </code>
    </td>
    
    <td>
      Where the provider's $0 checkout returns to, when the pack needs one. Defaults to the current URL.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts" rel="nofollow">
        src/runtime/vue/composables/use-gifts.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="redirect">
        
      </a>
      
       <code>
        redirect?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Open that checkout in the same tab instead of a new one.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts" rel="nofollow">
        src/runtime/vue/composables/use-gifts.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseGiftsReturn

Defined in: [src/runtime/vue/composables/use-gifts.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts)

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="received">
        
      </a>
      
       <code>
        received
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<a href="https://nuxt-backend.dev/docs/reference/api/use-billing#receivedgift">
        <code>
          ReceivedGift
        </code>
      </a>
      
      <span>
        
      </span>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The paid and claimed gifts addressed to the signed-in user's email, or <code>
        undefined
      </code>
      
       while loading.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts" rel="nofollow">
        src/runtime/vue/composables/use-gifts.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="unclaimed">
        
      </a>
      
       <code>
        unclaimed
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<a href="https://nuxt-backend.dev/docs/reference/api/use-billing#receivedgift">
        <code>
          ReceivedGift
        </code>
      </a>
      
      <span>
        
      </span>
      
      >
    </td>
    
    <td>
      Gifts that are paid but not yet claimed (ready to receive).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts" rel="nofollow">
        src/runtime/vue/composables/use-gifts.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isloading">
        
      </a>
      
       <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       until the gift list has loaded (always <code>
        false
      </code>
      
       when signed out).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts" rel="nofollow">
        src/runtime/vue/composables/use-gifts.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isclaiming">
        
      </a>
      
       <code>
        isClaiming
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      <code>
        true
      </code>
      
       while a claim is in flight.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts" rel="nofollow">
        src/runtime/vue/composables/use-gifts.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="claim">
        
      </a>
      
       <code>
        claim
      </code>
    </td>
    
    <td>
      (<code>
        giftId
      </code>
      
      , <code>
        options?
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      Claim one gift into the signed-in user's own billing account. Resolves <code>
        true
      </code>
      
       when the server confirmed the claim itself: the provider grants the credits a moment later, and they arrive reactively. Resolves <code>
        false
      </code>
      
       after opening the provider's $0 checkout, which the recipient finishes when the pack asks for checkout fields.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts" rel="nofollow">
        src/runtime/vue/composables/use-gifts.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

## Functions

### useGifts()

```ts
function useGifts(options?): UseGiftsReturn;
```

Defined in: [src/runtime/vue/composables/use-gifts.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-gifts.ts)

Gifts addressed to the signed-in user. A gift is a credit pack someone
else paid for on their own billing account; the recipient receives it by
claiming it, which grants the credits to their own account through a $0
order. Nothing is claimed without the recipient asking — show a "Receive"
button, or the packaged `GiftClaimBanner`.

#### Parameters

<table>
<thead>
  <tr>
    <th>
      Parameter
    </th>
    
    <th>
      Type
    </th>
  </tr>
</thead>

<tbody>
  <tr>
    <td>
      <code>
        options?
      </code>
    </td>
    
    <td>
      <a href="#usegiftsoptions">
        <code>
          UseGiftsOptions
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`UseGiftsReturn`](#usegiftsreturn)

#### Example

```vue
<script setup lang="ts">
const gifts = useGifts()
</script>
<template>
  <div v-for="gift in gifts.unclaimed.value" :key="gift.id">
    A gift from {{ gift.purchaserName ?? 'someone' }}
    <button @click="gifts.claim(gift.id)">Receive</button>
  </div>
</template>
```


## Sitemap

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