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

## Interfaces

### UseOrdersOptions

Defined in: [src/runtime/vue/composables/use-orders.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.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-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="limit">
        
      </a>
      
       <code>
        limit?
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        number
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Orders per page (reactive). Defaults to the provider's own page size.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="immediate">
        
      </a>
      
       <code>
        immediate?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Load the first page on mount. Default <code>
        true
      </code>
      
      .
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### InvoiceOptions

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

Per-call options for [UseOrdersReturn.invoice](#invoice).

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="redirect">
        
      </a>
      
       <code>
        redirect?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Open the invoice 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-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="open">
        
      </a>
      
       <code>
        open?
      </code>
    </td>
    
    <td>
      <code>
        boolean
      </code>
    </td>
    
    <td>
      Return the URL without opening it.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseOrdersReturn

Defined in: [src/runtime/vue/composables/use-orders.ts](https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.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="orders">
        
      </a>
      
       <code>
        orders
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<a href="https://nuxt-backend.dev/docs/reference/api/use-billing#billingorder">
        <code>
          BillingOrder
        </code>
      </a>
      
      <span>
        
      </span>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The current page of past charges — <code>
        undefined
      </code>
      
       until the first load.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="page">
        
      </a>
      
       <code>
        page
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        number
      </code>
      
      >
    </td>
    
    <td>
      The page being shown; provider page numbers start at 1.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="total">
        
      </a>
      
       <code>
        total
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        number
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Total orders across all pages, when the provider reported it.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="pagecount">
        
      </a>
      
       <code>
        pageCount
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        number
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Number of pages, when the provider reported it.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="hasmore">
        
      </a>
      
       <code>
        hasMore
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      Whether a further page exists.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="hasprevious">
        
      </a>
      
       <code>
        hasPrevious
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      Whether an earlier page exists.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isloading">
        
      </a>
      
       <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      Whether a load is in flight.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="error">
        
      </a>
      
       <code>
        error
      </code>
    </td>
    
    <td>
      <code>
        Ref
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      Message of the last failed load, <code>
        null
      </code>
      
       otherwise. Loads never reject.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="refresh">
        
      </a>
      
       <code>
        refresh
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Reload the current page.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="next">
        
      </a>
      
       <code>
        next
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Load the next page (no-op at the end).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="previous">
        
      </a>
      
       <code>
        previous
      </code>
    </td>
    
    <td>
      () => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Load the previous page (no-op on page 1).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="goto">
        
      </a>
      
       <code>
        goTo
      </code>
    </td>
    
    <td>
      (<code>
        page
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        void
      </code>
      
      >
    </td>
    
    <td>
      Jump to a page number.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="invoice">
        
      </a>
      
       <code>
        invoice
      </code>
    </td>
    
    <td>
      (<code>
        orderId
      </code>
      
      , <code>
        options?
      </code>
      
      ) => <code>
        Promise
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      Fetch the invoice link for an order and open it, returning the URL (<code>
        null
      </code>
      
       when the provider has no invoice for that order yet).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-orders.ts" rel="nofollow">
        src/runtime/vue/composables/use-orders.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

## Functions

### useOrders()

```ts
function useOrders(options?): UseOrdersReturn;
```

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

The signed-in customer's billing history — past charges straight from the
provider's orders API, plus the per-order invoice link. Nothing is mirrored
locally: this package keeps no order ledger, so the list is always what the
provider says it is.

Degrades all the way down: signed-out visitors and backends that have not
deployed `getOrders` get an empty list rather than an error, and a failed
load lands in `error` instead of rejecting (this is usually rendered by a
permanently mounted panel). Loads happen in the browser only.

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        options?
      </code>
    </td>
    
    <td>
      <a href="#useordersoptions">
        <code>
          UseOrdersOptions
        </code>
      </a>
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`UseOrdersReturn`](#useordersreturn)

#### Example

```vue
<script setup lang="ts">
const orders = useOrders({ limit: 10 })
</script>
<template>
  <p v-for="order in orders.orders.value" :key="order.id">
    {{ order.createdAt }} — {{ order.totalAmount / 100 }} {{ order.currency }}
    <button @click="orders.invoice(order.id)">Invoice</button>
  </p>
</template>
```


## Sitemap

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