Installation

You are reading the documentation for Vue InstantSearch v2. Read our migration guide to learn how to upgrade from v1 to v2. You can still find the v1 documentation here.

Installing Vue InstantSearch

Vue InstantSearch can be used either with a packaging system or with a direct link in your webpage.

With a build system

If you have a JavaScript build system (for example if you’ve created your project using the vue-cli), you can install Vue InstantSearch from npm:

1
npm install algoliasearch vue-instantsearch

Then in your main js file, you can load the package as Vue plugin:

1
2
3
4
5
6
7
8
9
10
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),
});

This will let you use all the widgets directly in your components.

Then in your component, you can load the main package:

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="demo_ecommerce"
  >
  </ais-instant-search>
</template>

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

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

Directly in your page

Vue works when you’re embedding it directly in a html page too. First add the two script tags:

1
2
<script src="https://cdn.jsdelivr.net/npm/algoliasearch@3.33.0/dist/algoliasearchLite.min.js" integrity="sha256-3Laj91VXexjTlFLgL8+vvIq27laXdRmFIcO2miulgEs=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-instantsearch@2.0.1/dist/vue-instantsearch.js" integrity="sha256-hugfQrBAG8mfgKvHCfeNrTlM8/SZ/hKStvbvcpVPpaY=" crossorigin="anonymous"></script>

Then you can write your Vue app within your html, for example in a #app div.

1
2
3
<ais-instant-search index-name="ikea" v-bind:search-client="searchClient">
  <!-- regular Vue InstantSearch app inside -->
</ais-instant-search>

Finally also add a last script tag with the instantiation of the plugin and the app:

1
2
3
4
5
6
7
8
9
10
11
12
13
<script>
  Vue.use(VueInstantSearch);

  new Vue({
    el: '#app',
    data: {
      searchClient: algoliasearch(
        'YourApplicationID',
        'YourAdminAPIKey',
      ),
    },
  });
</script>

Optimize your build with tree shaking

Tree shaking can be done with modern build systems. The goal of it is to only have code that’s actually used in your built site. In the context of Vue InstantSearch this means not including the widgets that aren’t used. You can do this by using the components directly, rather than the Vue.use(InstantSearch) call.

In every component you’re using InstantSearch widgets, you can import and instantiate them like this:

1
2
3
4
5
6
7
8
import { AisInstantSearch, AisSearchBox } from 'vue-instantsearch';

export default {
  components: {
    AisInstantSearch,
    AisSearchBox,
  },
};

The build system you’re using will then be able to only include the widgets that you’re actually using!

Browser support

We support the last two versions of major browsers (Chrome, Edge, Firefox, Safari).

To support IE11, we recommend using polyfill.io. Add this script to your page to conditionally load polyfills:

1
<script src="https://polyfill.io/v3/polyfill.min.js?features=default,Array.prototype.find,Array.prototype.includes"></script>