> ## 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-configure

> Adds search parameters to your requests.

```vue Signature theme={"system"}
<ais-configure
  // Optional parameters
  v-bind="object searchParameters"
/>
```

## 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 { AisConfigure } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisConfigure,
      },
      // ...
    };
    ```
  </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-configure" horizontal>
  Preview this widget and its behavior.
</Card>

## 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](/doc/api-reference/search-api-parameters).

## Examples

```vue Vue icon=code theme={"system"}
<ais-configure
  :hits-per-page.camel="4"
  :distinct="true"
  :analytics="false"
  :enable-personalization.camel="true"
/>
```

## Props

<ParamField body="searchParameters" type="object">
  A list of [search parameters](/doc/api-reference/search-api-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`](https://vuejs.org/v2/api/#v-bind) before the value of the prop.

  ```vue Vue icon=code theme={"system"}
  <ais-configure
    :hits-per-page.camel="4"
    :distinct="true"
    :enable-personalization.camel="true"
  />
  ```
</ParamField>

## Customize the UI

<ParamField body="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 Vue icon=code theme={"system"}
  <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>
  ```
</ParamField>

## HTML output

This widget doesn't have any HTML output.