How to Install Vue InstantSearch

You can use Vue InstantSearch either with a packaging system or with a direct link in your web page.

With a packaging system

If you have a JavaScript build tool (for example if you’ve created your project using the Vue command-line tool), 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),
});

1
2
3
4
5
6
7
8
9
10
import Vue from 'vue';
import App from './App.vue';
import InstantSearch from 'vue-instantsearch/vue3/es';

Vue.use(InstantSearch);

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

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

Directly in your page

Vue works when you’re embedding it directly in an 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',
        'YourSearchOnlyApiKey',
      ),
    },
  });
</script>

Optimize your build with tree shaking

Tree shaking can be done with modern build tools. The goal is to 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,
  },
};

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

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

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

Supported browsers

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

Algolia supports the last two versions of the major browsers: Chrome, Edge, Firefox, Safari.

To support Internet Explorer 11, use 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>