Skip to main content
Signature
<ais-state-results
  // Optional parameters
  :catch-error="boolean"
/>

​
Import

  • Component
  • Plugin
To ensure optimal bundle sizes, see Optimize build size.
Vue
import { AisStateResults } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

export default {
  components: {
    AisStateResults
  },
  // ...
};
View demo

​
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
<ais-state-results />

​
Props

​
catch-error
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.

​
Customize the UI

​
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.ScopeThe 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.This also includes parameters from the Helper, 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.This also includes parameters from the Helper, e.g. disjunctiveFacetsRefinements.statusThe 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.errorIf the status is error, there is also an error object available in the scope.
<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>