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

## Interfaces

### UseSearchOptions

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

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <a id="type-parameter-query">
        
      </a>
      
       <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <code>
        FunctionReference_future
      </code>
      
      <<code>
        "query"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="term">
        
      </a>
      
       <code>
        term
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        string
      </code>
      
       | <code>
        null
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      The search term (a value, ref or getter). A blank, whitespace-only, <code>
        null
      </code>
      
       or <code>
        undefined
      </code>
      
       term skips the query.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-search.ts" rel="nofollow">
        src/runtime/vue/composables/use-search.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="debounce">
        
      </a>
      
       <code>
        debounce?
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        number
      </code>
      
       | <code>
        undefined
      </code>
      
      >
    </td>
    
    <td>
      Debounce, in milliseconds, before the term is sent to the server (a value, ref or getter; default 200).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-search.ts" rel="nofollow">
        src/runtime/vue/composables/use-search.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="args">
        
      </a>
      
       <code>
        args?
      </code>
    </td>
    
    <td>
      <code>
        MaybeRefOrGetter
      </code>
      
      <<code>
        Omit
      </code>
      
      <<code>
        FunctionArgs
      </code>
      
      <<code>
        Query
      </code>
      
      >, <code>
        "query"
      </code>
      
      >>
    </td>
    
    <td>
      Extra arguments merged with <code>
        { query }
      </code>
      
       (e.g. <code>
        { limit }
      </code>
      
       or filter fields).
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-search.ts" rel="nofollow">
        src/runtime/vue/composables/use-search.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

---

### UseSearchReturn

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

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <a id="type-parameter-query-1">
        
      </a>
      
       <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <code>
        FunctionReference_future
      </code>
      
      <<code>
        "query"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Properties

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

<tbody>
  <tr>
    <td>
      <a id="results">
        
      </a>
      
       <code>
        results
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        FunctionReturnType
      </code>
      
      <<code>
        Query
      </code>
      
      >>
    </td>
    
    <td>
      The matching documents: an empty array while loading, while the term is blank, and after a failed read.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-search.ts" rel="nofollow">
        src/runtime/vue/composables/use-search.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="isloading">
        
      </a>
      
       <code>
        isLoading
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        boolean
      </code>
      
      >
    </td>
    
    <td>
      True while a non-empty term is in flight and no result has arrived yet.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-search.ts" rel="nofollow">
        src/runtime/vue/composables/use-search.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="error">
        
      </a>
      
       <code>
        error
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      < | <a href="https://nuxt-backend.dev/docs/reference/api/functions#backenderror">
        <code>
          BackendError
        </code>
      </a>
      
       | <code>
        null
      </code>
      
      >
    </td>
    
    <td>
      Why the search failed, or <code>
        null
      </code>
      
      . Clears once a later term reads.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-search.ts" rel="nofollow">
        src/runtime/vue/composables/use-search.ts
      </a>
    </td>
  </tr>
  
  <tr>
    <td>
      <a id="term-1">
        
      </a>
      
       <code>
        term
      </code>
    </td>
    
    <td>
      <code>
        ComputedRef
      </code>
      
      <<code>
        string
      </code>
      
      >
    </td>
    
    <td>
      The debounced term currently driving the query.
    </td>
    
    <td>
      <a href="https://github.com/qruto/nuxt-backend/blob/main/src/runtime/vue/composables/use-search.ts" rel="nofollow">
        src/runtime/vue/composables/use-search.ts
      </a>
    </td>
  </tr>
</tbody>
</table>

## Functions

### useSearch()

```ts
function useSearch<Query>(query, options): UseSearchReturn<Query>;
```

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

Reactive, debounced full-text search. Pairs with a query created by
`defineSearch` (or any query taking `{ query: string }`): as the term
changes it debounces, skips the round-trip while blank, and returns the live
results. It never throws: a failed search shows in `error`.

#### Type Parameters

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

<tbody>
  <tr>
    <td>
      <a id="type-parameter-query-2">
        
      </a>
      
       <code>
        Query
      </code>
      
       <em>
        extends
      </em>
      
       | <a href="https://docs.convex.dev/api/modules/server#functionreference" rel="nofollow">
        <code>
          FunctionReference
        </code>
      </a>
      
      <<code>
        "query"
      </code>
      
      > | <code>
        FunctionReference_future
      </code>
      
      <<code>
        "query"
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Parameters

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

<tbody>
  <tr>
    <td>
      <code>
        query
      </code>
    </td>
    
    <td>
      <code>
        Query
      </code>
    </td>
  </tr>
  
  <tr>
    <td>
      <code>
        options
      </code>
    </td>
    
    <td>
      <a href="#usesearchoptions">
        <code>
          UseSearchOptions
        </code>
      </a>
      
      <<code>
        Query
      </code>
      
      >
    </td>
  </tr>
</tbody>
</table>

#### Returns

[`UseSearchReturn`](#usesearchreturn)<`Query`>

#### Example

```vue
<script setup lang="ts">
import { useSearch } from '#imports'
import { api } from '#backend/api'

const term = ref('')
const { results, isLoading } = useSearch(api.search.searchMessages, { term, debounce: 200 })
</script>
```


## Sitemap

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