Skip to main content
<ais-configure> is a component that allows you to configure search parameters declaratively. Any Algolia search parameter can be passed as a prop and will be applied to the search.

​
Usage

<template>
  <ais-instant-search :search-client="searchClient" index-name="products">
    <ais-configure
      :hits-per-page.camel="20"
      :distinct="true"
      :filters="'available = true'"
    />
    <ais-hits />
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch/lite';
import { AisInstantSearch, AisConfigure, AisHits } from 'vue-instantsearch';

export default {
  components: { AisInstantSearch, AisConfigure, AisHits },
  data() {
    return {
      searchClient: algoliasearch('YourApplicationID', 'YourSearchOnlyAPIKey'),
    };
  },
};
</script>

​
Props

<ais-configure> accepts any valid Algolia search parameter as a prop. All props are passed directly to the Algolia search API.
When using camelCase search parameters in Vue templates, you need to use the .camel modifier (e.g., :hits-per-page.camel="20") or bind them as strings with bracket notation.

​
Common Search Parameters

​
hitsPerPage
number
Number of hits to retrieve per page.
<ais-configure :hits-per-page.camel="20" />
​
filters
string
Filter expression to apply to the search.
<ais-configure :filters="'category:shoes AND price < 100'" />
​
facetFilters
array | string
Filter hits by facet values.
<ais-configure :facet-filters.camel="[['brand:Apple', 'brand:Samsung']]" />
​
numericFilters
array | string
Filter hits by numeric attributes.
<ais-configure :numeric-filters.camel="['price >= 10', 'price <= 100']" />
​
tagFilters
array | string
Filter hits by tags.
<ais-configure :tag-filters.camel="['featured']" />
​
distinct
boolean | number
Enable distinct feature to remove duplicates based on the attribute set in the index settings.
<ais-configure :distinct="true" />
​
attributesToRetrieve
array
List of attributes to retrieve.
<ais-configure :attributes-to-retrieve.camel="['name', 'price', 'image']" />
​
attributesToHighlight
array
List of attributes to highlight.
<ais-configure :attributes-to-highlight.camel="['name', 'description']" />
​
attributesToSnippet
array
List of attributes to snippet with their maximum length.
<ais-configure :attributes-to-snippet.camel="['description:50']" />
​
highlightPreTag
string
String to insert before highlighted parts.
<ais-configure :highlight-pre-tag.camel="'<strong>'" />
​
highlightPostTag
string
String to insert after highlighted parts.
<ais-configure :highlight-post-tag.camel="'</strong>'" />
​
snippetEllipsisText
string
String to use as an ellipsis indicator for snippets.
<ais-configure :snippet-ellipsis-text.camel="'...'" />
​
restrictHighlightAndSnippetArrays
boolean
Restrict highlighting and snippeting to matched query words only.
<ais-configure :restrict-highlight-and-snippet-arrays.camel="true" />
​
page
number
Specify the page to retrieve (zero-based).
<ais-configure :page="0" />
​
offset
number
Specify the offset of the first hit to return.
<ais-configure :offset="20" />
​
length
number
Number of hits to return when using offset/length pagination.
<ais-configure :length="10" />
​
aroundLatLng
string
Search for entries around a central geolocation.
<ais-configure :around-lat-lng.camel="'40.71, -74.01'" />
​
aroundRadius
number | string
Maximum radius for geo search (in meters).
<ais-configure :around-radius.camel="5000" />
​
minimumAroundRadius
number
Minimum radius for geo search (in meters).
<ais-configure :minimum-around-radius.camel="1000" />
​
analytics
boolean
Enable or disable analytics.
<ais-configure :analytics="true" />
​
analyticsTags
array
Tags to apply to the analytics.
<ais-configure :analytics-tags.camel="['mobile', 'sale']" />
​
clickAnalytics
boolean
Enable click analytics.
<ais-configure :click-analytics.camel="true" />
​
userToken
string
Associates a user token with the search.
<ais-configure :user-token.camel="'user-123'" />
​
enablePersonalization
boolean
Enable personalization.
<ais-configure :enable-personalization.camel="true" />
​
ruleContexts
array
Enable specific query rules based on context.
<ais-configure :rule-contexts.camel="['mobile', 'sale']" />

​
Scoped Slot

The component provides a scoped slot that exposes the current search parameters and a refine function:
​
default
slot
<ais-configure :hits-per-page.camel="10">
  <template v-slot="{ searchParameters, refine }">
    <div>
      Current hits per page: {{ searchParameters.hitsPerPage }}
      <button @click="refine({ hitsPerPage: 20 })">
        Show more results
      </button>
    </div>
  </template>
</ais-configure>

​
CSS Classes

When using the scoped slot, the component renders with:
  • ais-Configure - Root container class

​
Examples

​
Basic Configuration

<template>
  <ais-instant-search :search-client="searchClient" index-name="products">
    <ais-configure
      :hits-per-page.camel="12"
      :distinct="true"
      :click-analytics.camel="true"
    />
    <ais-search-box />
    <ais-hits />
  </ais-instant-search>
</template>

​
With Filters

<template>
  <ais-instant-search :search-client="searchClient" index-name="products">
    <ais-configure
      :hits-per-page.camel="20"
      :filters="activeFilters"
    />
    <ais-hits />
  </ais-instant-search>
</template>

<script>
export default {
  data() {
    return {
      showOnlyAvailable: true,
    };
  },
  computed: {
    activeFilters() {
      return this.showOnlyAvailable ? 'available = true' : '';
    },
  },
};
</script>

​
Geo Search Configuration

<template>
  <ais-instant-search :search-client="searchClient" index-name="stores">
    <ais-configure
      :around-lat-lng.camel="userLocation"
      :around-radius.camel="5000"
      :hits-per-page.camel="10"
    />
    <ais-hits />
  </ais-instant-search>
</template>

<script>
export default {
  data() {
    return {
      userLocation: '40.7128,-74.0060', // New York City
    };
  },
};
</script>

​
Custom Highlighting

<template>
  <ais-instant-search :search-client="searchClient" index-name="articles">
    <ais-configure
      :attributes-to-highlight.camel="['title', 'content']"
      :attributes-to-snippet.camel="['content:100']"
      :highlight-pre-tag.camel="'<mark class=\"highlight\">'"
      :highlight-post-tag.camel="'</mark>'"
    />
    <ais-search-box />
    <ais-hits />
  </ais-instant-search>
</template>

​
Analytics Configuration

<template>
  <ais-instant-search :search-client="searchClient" index-name="products">
    <ais-configure
      :analytics="true"
      :analytics-tags.camel="analyticsTagsList"
      :click-analytics.camel="true"
      :user-token.camel="userId"
    />
    <ais-hits />
  </ais-instant-search>
</template>

<script>
export default {
  data() {
    return {
      userId: 'user-12345',
      analyticsTagsList: ['web', 'desktop'],
    };
  },
};
</script>

​
Dynamic Configuration with Scoped Slot

<template>
  <ais-instant-search :search-client="searchClient" index-name="products">
    <ais-configure :hits-per-page.camel="hitsPerPage">
      <template v-slot="{ searchParameters, refine }">
        <div class="configure-panel">
          <p>Showing {{ searchParameters.hitsPerPage }} results per page</p>
          <button @click="refine({ hitsPerPage: 10 })">10</button>
          <button @click="refine({ hitsPerPage: 20 })">20</button>
          <button @click="refine({ hitsPerPage: 50 })">50</button>
        </div>
      </template>
    </ais-configure>
    <ais-hits />
  </ais-instant-search>
</template>

<script>
export default {
  data() {
    return {
      hitsPerPage: 20,
    };
  },
};
</script>

​
Multiple Configurations for Different Indices

<template>
  <ais-instant-search :search-client="searchClient">
    <ais-index index-name="products">
      <ais-configure
        :hits-per-page.camel="12"
        :filters="'available = true'"
      />
      <ais-hits />
    </ais-index>
    
    <ais-index index-name="articles">
      <ais-configure
        :hits-per-page.camel="5"
        :attributes-to-snippet.camel="['content:200']"
      />
      <ais-hits />
    </ais-index>
  </ais-instant-search>
</template>

​
Notes

The configure state is not included in the URL when using routing. This is by design to avoid polluting the URL with technical search parameters.
Parameters set via ais-configure override any default settings from your Algolia dashboard. Make sure your configuration doesn’t conflict with index settings.