ais-configure

Signature

<ais-configure
  // Optional parameters
  v-bind="object searchParameters"
/>

Import

Copy

1
2
3
4
5
6
7
8
9
import { AisConfigure } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3

export default {
  components: {
    AisConfigure
  },
  // ...
};

1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.

See code examples

See live example

About this widget

The ais-configure widget lets you provide raw search parameters to the Algolia API without rendering anything.

Any props you add to this widget is forwarded to Algolia. For more information on the different parameters you can set, have a look at the search parameters API reference.

Examples

Copy
<ais-configure
  :hits-per-page.camel="4"
  :distinct="true"
  :analytics="false"
  :enable-personalization.camel="true"
/>

Props

Parameter Description


            searchParameters

type: object

A list of search parameters to enable when the widget mounts. Note that the props have to use camel case since they’re directly forwarded to the Algolia API. In HTML or string templates, you can do this by adding .camel before the value of the prop.

Copy
<ais-configure
  :hits-per-page.camel="4"
  :distinct="true"
  :enable-personalization.camel="true"
/>

Customize the UI

Parameter Description


            default

The slot to override the DOM output

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

Scope

searchParameters: object: the current search parameters applied to the search.
refine: (object) => void: the function to change the search parameters applied to the search.

Copy
<ais-configure :enable-rules.camel="false" :hits-per-page.camel="5">
  <template v-slot="{ searchParameters, refine }">
    <button
      @click="refine({
        ...searchParameters,
        enableRules: !searchParameters.enableRules,
      })"
    >Toggle only query rules</button>
    Currently applied filters:
    <pre>{{ searchParameters }}</pre>
  </template>
</ais-configure>

HTML output

This widget has no HTML output.

Did you find this page helpful?