ais-configure

Adds search parameters to your requests.

Signature

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

Import

Component

To ensure optimal bundle sizes, see Optimize build size.

Vue

import { AisConfigure } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

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

Plugin

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

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 about the different parameters you can set, see the search parameters API reference.

Examples

Vue

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

Props

searchParameters · object

A list of search parameters to enable when the widget mounts. 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.

Vue

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

Customize the UI

default

The slot to override the DOM output 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.

Vue

<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 doesn’t have any HTML output.