Skip to main content
Signature
<ais-instant-search
  index-name="instant_search"
  :search-client="searchClient"
  :middlewares="middlewares"
>
  <!-- Widgets -->
</ais-instant-search>

​
About this widget

The middleware function returns an object with onStateChange, subscribe, and unsubscribe functions. The middleware function doesn’t perform any actions itself but lets you inject logic into Vue InstantSearch, for example, sending events to Google Analytics. To send Algolia click and conversion events, use the insights middleware.

​
Requirements

​
Examples

Vue
<template>
  <ais-instant-search
    index-name="instant_search"
    :search-client="searchClient"
    :middlewares="middlewares"
  >
    <!-- Widgets -->
  </ais-instant-search>
</template>

<script>
function middleware({ instantSearchInstance }) {
  return {
    onStateChange({ uiState }) {
      // Do something with `uiState` every time the state changes.
    },
    subscribe() {
      // Do something when the InstantSearch instance starts.
    },
    unsubscribe() {
      // Do something when the InstantSearch instance is disposed of.
    },
  };
}

export default {
  data() {
    return {
      // ...
      middlewares: [middleware],
    };
  },
};
</script>

​
Options

​
instantSearchInstance
object
required
You have access to the instance of instantsearch which lets you read values from the instance or call instance methods like addWidgets, setUiState, and refresh.
JavaScript
function middleware({ instantSearchInstance }) {
  return {
    onStateChange({ uiState }) {
      // ...
    },
    subscribe() {
      // ...
    },
    unsubscribe() {
      // ...
    },
  };
}

​
Hooks

​
onStateChange
({ uiState }) => void
required
This function is called with uiState whenever the state changes.
JavaScript
function middleware({ instantSearchInstance }) {
  return {
    // ...
    onStateChange({ uiState }) {
      const indexName = "<your-index-name>";
      const { query } = uiState[indexName];
      const title = document.querySelector("<your-selector>");
      title.innerText = query ? `Query: ${query}` : `No query`;
    },
  };
}
​
subscribe
() => void
required
This function is called when the InstantSearch instance starts (when search.start() is called). This is where you can add event listeners, subscribe to an API, and run any side effects.
JavaScript
function middleware({ instantSearchInstance }) {
  let subscription;
  let listener;

  return {
    // ...
    subscribe() {
      subscription = someAPI.subscribe();

      listener = (event) => {
        // do something
      };
      document
        .querySelector("<your-selector>")
        .addEventListener("click", listener);
    },
  };
}
​
unsubscribe
() => void
required
This function is called when the InstantSearch instance is disposed of. You can clean up anything you initiated in the subscribe function.
JavaScript
function middleware({ instantSearchInstance }) {
  let subscription;
  let listener;

  return {
    // ...
    unsubscribe() {
      subscription.unsubscribe();

      document
        .querySelector("<your-selector>")
        .removeEventListener("click", listener);
    },
  };
}
⌘I