> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ais-state-results

> Provides the current search state and results to components.

```vue Signature theme={"system"}
<ais-state-results
  // Optional parameters
  :catch-error="boolean"
/>
```

## Import

<Tabs>
  <Tab title="Component">
    To ensure optimal bundle sizes,
    see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).

    ```js Vue icon=code theme={"system"}
    import { AisStateResults } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisStateResults
      },
      // ...
    };
    ```
  </Tab>

  <Tab title="Plugin">
    This imports all widgets, even the ones you don't use.
    For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).

    ```js JavaScript icon="code" theme={"system"}
    import Vue from "vue";
    import InstantSearch from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    Vue.use(InstantSearch);
    ```
  </Tab>
</Tabs>

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/vue/?selectedKind=ais-state-results" horizontal>
  Preview this widget and its behavior.
</Card>

## About this widget

The `ais-state-results` allows you reach into the current search state,
for example, for conditional rendering or other rendering that depends on what the current refinement or results are.

## Examples

```vue Vue icon=code theme={"system"}
<ais-state-results />
```

## Props

<ParamField path="catch-error" type="boolean">
  If `true`, errors thrown by InstantSearch are handled by InstantSearch and are available in the `error` property from the slot.
  Set `catch-error` to `false` if you want to handle these errors elsewhere.
</ParamField>

## Customize the UI

<ParamField body="default">
  The slot to override the complete DOM output of the widget.

  When you implement this slot,
  none of the other slots will change the output,
  as the default slot surrounds them.

  **Scope**

  The scope is an object with the keys `state` and `results`.

  **`state`**

  * `query: string`. The current value of the query.
  * `page: number`. The currently applied page.
  * ... any other currently applied search parameters.

  You can find all regular parameters on the [search parameters page](/doc/api-reference/api-parameters).

  This also includes parameters from the [Helper](https://community.algolia.com/algoliasearch-helper-js/reference.html#query-parameters),
  such as, `disjunctiveFacetsRefinements`.

  **`results`**

  * `_rawResults: object[]`. The raw response from the Algolia API.
  * `query: string`. The value of the query from the latest response.
  * `hits: object[]`. Matching hits from the latest response.
  * ... other values from the latest response.

  You can find all regular response parameters on [the response format page](/doc/guides/building-search-ui/going-further/backend-search/in-depth/understanding-the-api-response).

  This also includes parameters from the [Helper](https://community.algolia.com/algoliasearch-helper-js/reference.html#query-parameters), e.g. `disjunctiveFacetsRefinements`.

  **`status`**

  The status is a string which can be `idle`, `loading`, `stalled`, or `error`.
  To display a loading indicator, prefer using `stalled`, as `loading` happens for a short amount of time only.

  **`error`**

  If the status is `error`, there is also an error object available in the scope.

  <CodeGroup>
    ```vue No results theme={"system"}
    <ais-state-results>
      <template v-slot="{ state: { query }, results: { hits } }">
        <div v-show="!hits.length">
          No results found for the query: <q>{{ query }}</q>
        </div> 
      </template>
    </ais-state-results>
    ```

    ```vue Banner from rules theme={"system"}
    <ais-state-results>
      <template v-slot="{ results: { userData } }">
        <img
          v-for="item in userData"
          :key="item.source"
          :src="'https://example.com/images/' + item.source"
        />
      </template>
    </ais-state-results>
    ```

    ```vue Loading indicator theme={"system"}
    <ais-state-results>
      <template v-slot="{ status }">
        <p v-if="status === 'stalled'">Loading…</p>
      </template>
    </ais-state-results>
    ```
  </CodeGroup>
</ParamField>