Essentials Using components

Using components

Vue InstantSearch comes pre-packaged with many components necessary to build a full-featured search experience.

If provided components do not fit your needs, let us know via GitHub.

Available components

You can try most of them out in our playground.

🕹 try out live

• ais-instant-search
• ais-autocomplete
• ais-breadcrumb
• ais-clear-refinements
• ais-current-refinements
• ais-hierarchical-menu
• ais-hits
• ais-hits-per-page
• ais-infinite-hits
• ais-menu
• ais-menu-select
• ais-numeric-menu
• ais-panel
• ais-range-input
• ais-refinement-list
• ais-sort-by
• ais-toggle-refinement
• ais-configure
• ais-highlight
• ais-pagination
• ais-powered-by
• ais-rating-menu
• ais-search-box
• ais-state-results
• ais-snippet
• ais-stats

Registering components

There are 2 ways to register components: all at once or one by one.

All components at once

Vue InstantSearch is also shipped as a Vue plugin.

// src/main.js
import Vue from 'vue';
import App from './App.vue'
import InstantSearch from 'vue-instantsearch';

Vue.use(InstantSearch);

new Vue({
  el: '#app',
  render: h => h(App)
});

The line Vue.use(InstantSearch); registers all components at once and makes them available in templates.

Info: When using the standalone build, all components are automatically imported.

Only the used components

The previous approach is nice and easy, but it has the drawback of including code from components in the final application that we might not use.

An alternative approach is to register components when we need them:

// src/main.js
import Vue from 'vue';
import App from './App.vue'
import {
  AisInstantSearch,
  AisSearchBox,
  AisHits,
  AisPagination
} from 'vue-instantsearch';

Vue.component(AisInstantSearch.name, AisInstantSearch);
Vue.component(AisSearchBox.name, AisSearchBox);
Vue.component(AisHits.name, AisHits);
Vue.component(AisPagination.name, AisPagination);

new Vue({
  el: '#app',
  render: h => h(App)
})

With this approach, only the four manually imported components will be part of your production build. The other components will be removed after tree-shaking.

It’s also possible to do this in your component itself:

<template>
  <div id="app">
    <ais-instant-search :search-client="searchClient" index-name="indexName">
      <ais-search-box></ais-search-box>
      <ais-hits></ais-hits>
      <ais-pagination></ais-pagination>
    </ais-instant-search>
  </div>
</template>

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

export default {
  components: {
    AisInstantSearch,
    AisSearchBox,
    AisHits,
    AisPagination,
  },
  data() {
    return {
      searchClient: algoliasearch('appId', 'apiKey');
    };
  },
};
</script>

Naming

When using Vue.use(InstantSearch);, all components are registered with the ais- prefix, which stands for Algolia InstantSearch. Example: ais-search-box.

When manually importing components, you can change that naming convention and assign a custom tag name.

Using components

All search components must be wrapped in an ais-instant-search component.

<template>
  <div id="app">
    <ais-instant-search :search-client="searchClient" index-name="indexName">
      <ais-search-box></ais-search-box>
      <ais-hits></ais-hits>
      <ais-pagination></ais-pagination>
    </ais-instant-search>
  </div>
</template>

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

export default {
  data() {
    return {
      searchClient: algoliasearch('appId', 'apiKey');
    };
  },
};
</script>