Skip to main content
<ais-instant-search> is the root component that connects your Vue application to Algolia. It manages the search state, handles communication with the Algolia API, and provides context to all child search components.

​
Usage

<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="products"
  >
    <!-- Your search UI components -->
  </ais-instant-search>
</template>

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

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

​
Props

​
searchClient
SearchClient
required
The Algolia search client created with algoliasearch().
import algoliasearch from 'algoliasearch/lite';

const searchClient = algoliasearch(
  'YourApplicationID',
  'YourSearchOnlyAPIKey'
);
​
indexName
string
The main index name to search into. Optional if you use ais-index components.
​
insightsClient
Function
The Algolia Insights client for sending analytics events.
import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares';
​
routing
object | boolean
Configuration for URL routing and browser history synchronization.
import { history } from 'instantsearch.js/es/lib/routers';
import { simple } from 'instantsearch.js/es/lib/stateMappings';

{
  router: history(),
  stateMapping: simple()
}
​
stalledSearchDelay
number
default:"200"
Time in milliseconds before a search is considered stalled. The component emits a stalled state when searches take longer than this value.
​
searchFunction
Function
A function that will be called instead of the regular search. This is useful for custom search logic or intercepting searches.
function searchFunction(helper) {
  // Custom logic before searching
  if (helper.state.query === '') {
    return; // Don't search on empty query
  }
  helper.search();
}
​
onStateChange
Function
Callback function called when the search state changes.
onStateChange({ uiState, setUiState }) {
  // Custom logic
  setUiState(uiState);
}
​
initialUiState
object
Initial UI state of the search. Useful for server-side rendering or setting default filters.
{
  indexName: {
    query: 'initial query',
    refinementList: {
      brand: ['Apple', 'Samsung']
    }
  }
}
​
insights
boolean | object
Configuration for enabling Algolia Insights automatic events.
// Boolean
insights: true

// Object configuration
insights: {
  insightsInitParams: {
    useCookie: true
  }
}
​
middlewares
Array<Middleware>
Array of middleware functions to customize InstantSearch behavior.
import { createInsightsMiddleware } from 'instantsearch.js/es/middlewares';

middlewares: [
  createInsightsMiddleware({ insightsClient })
]
​
future
object
Feature flags for upcoming breaking changes.
future: {
  preserveSharedStateOnUnmount: false
}

​
Slots

​
default
slot
The default slot contains all your search UI components.
<ais-instant-search :search-client="searchClient" index-name="products">
  <ais-search-box />
  <ais-hits />
</ais-instant-search>

​
Accessing the InstantSearch Instance

The component creates an instantSearchInstance that you can access in child components through Vue’s provide/inject mechanism: 
<script>
export default {
  inject: ['$_ais_instantSearchInstance'],
  mounted() {
    console.log(this.$_ais_instantSearchInstance);
  }
};
</script>

​
CSS Classes

The component renders with these CSS classes:
  • ais-InstantSearch - Root container class

​
Examples

​
Basic Setup

<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="products"
  >
    <ais-search-box />
    <ais-hits />
  </ais-instant-search>
</template>

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

export default {
  components: { AisInstantSearch },
  data() {
    return {
      searchClient: algoliasearch('APP_ID', 'API_KEY'),
    };
  },
};
</script>

​
With URL Routing

<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="products"
    :routing="routing"
  >
    <ais-search-box />
    <ais-refinement-list attribute="brand" />
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch/lite';
import { history } from 'instantsearch.js/es/lib/routers';
import { simple } from 'instantsearch.js/es/lib/stateMappings';

export default {
  data() {
    return {
      searchClient: algoliasearch('APP_ID', 'API_KEY'),
      routing: {
        router: history(),
        stateMapping: simple(),
      },
    };
  },
};
</script>

​
With Initial State

<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="products"
    :initial-ui-state="initialState"
  >
    <ais-search-box />
    <ais-hits />
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch/lite';

export default {
  data() {
    return {
      searchClient: algoliasearch('APP_ID', 'API_KEY'),
      initialState: {
        products: {
          query: 'phone',
          refinementList: {
            brand: ['Apple'],
          },
        },
      },
    };
  },
};
</script>

<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="products"
    :search-function="searchFunction"
  >
    <ais-search-box />
    <ais-hits />
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch/lite';

export default {
  data() {
    return {
      searchClient: algoliasearch('APP_ID', 'API_KEY'),
    };
  },
  methods: {
    searchFunction(helper) {
      // Only search when query has at least 3 characters
      if (helper.state.query.length < 3) {
        return;
      }
      helper.search();
    },
  },
};
</script>