Installation

You’re reading the documentation for Vue InstantSearch v3. Read our migration guide to learn how to upgrade from v2 to v3. You can still find the documentation for version 1 on our community website.

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@4.5.1/dist/algoliasearch-lite.umd.js" integrity="sha256-EXPXz4W6pQgfYY3yTpnDa3OH8/EPn16ciVsPQ/ypsjk=" crossorigin="anonymous"></script>
<script src="https://cdn.jsdelivr.net/npm/vue-instantsearch@3.4.2/dist/vue-instantsearch.js" integrity="sha256-n2IafdANKRLjFjtPQVSQZ6QlxBrYqPDZfi3IkZjDT84=" 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 Internet Explorer 11, 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%2CArray.prototype.find%2CArray.prototype.includes%2CPromise%2CObject.assign%2CObject.entries"></script>

Note that the code samples used in this documentation can use JavaScript syntax not natively supported by older browsers like Internet Explorer 11. If your site supports older browsers, make sure to use a tool like Babel to transform your code into code that works in the browsers you target.