Integrating Algolia InstantSearch with Vue.js

Search can be difficult to get right. You want to deliver real-time results to your clients, but to do that you either need a tricky server setup and lots of database accesses, or a dedicated server just for search, or upload everything you use for search to the client before searching… or you could just use Algolia InstantSearch. (No, this isn’t or anything.) It is a hosted solution that lets you push the data you want indexed to their servers. From there, you can use really simple components to add real-time search to your Vue.js apps.

Let’s take a look.

Getting Started

Start a simple Vue project with vue-cli and the webpack-simple template.

Next, install vue-instantsearch.

# Yarn
$ yarn add vue-instantsearch
# NPM
$ npm install vue-instantsearch --save

Setup

Now, enable the plugin in main.js. It’s dead-simple.

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

Vue.use(InstantSearch);

new Vue({
  template: '<router-view></router-view>'
})
.$mount('#app');

Adding Search

In App.vue, let’s add a section for search using Algolia’s most basic setup.

vue-instantsearch uses react-style wrapper components that wraps the “real” renderable components in virtual components that provide data and capabilities to their chilren.

The first one you need is ais-index. This provides the connection information needed for Algolia InstantSearch to find your results. You can find your app-id, api-key and index-name in your Algolia dashboard if you have set up an account and index there. For now we’ll just use their provided demo credentials.

The next component is ais-search-box. It renders (surprise) a search box. (Plus a nice little search and clear button.)

Following that is the ais-results component. This one is a bit interesting. It uses a scoped slot to allow you to provide your own search result template to be rendered. This means that if you have an image URL in your search results, you can just throw in an img tag and set the src property and boom, search results with images.

The final component here is ais-highlight. It will wrap the matched portion of a particular property (specified by attribute-name) on your result object in <em></em> tags. (It can be customized.) That means if you searched for Something and your result object looks like this,

{
  "name": "The Book of Something"
}

the resulting output will look like this: <p>The book of <em>something</em><p>. Highlighting is a frustrating feature to implement manually, so it’s great that they provide support for it out-of-the-box.

<template>
  <div id="app">
    <img src="./assets/logo.png">
    <h1>{{ msg }}</h1>
    <h2>Essential Links</h2>
    <ul>
      <li><a href="https://vuejs.org" target="_blank">Core Docs</a></li>
      <li><a href="https://forum.vuejs.org" target="_blank">Forum</a></li>
      <li><a href="https://chat.vuejs.org" target="_blank">Community Chat</a></li>
      <li><a href="https://twitter.com/vuejs" target="_blank">Twitter</a></li>
    </ul>
    <h2>Ecosystem</h2>
    <ul>
      <li><a href="http://router.vuejs.org/" target="_blank">vue-router</a></li>
      <li><a href="http://vuex.vuejs.org/" target="_blank">vuex</a></li>
      <li><a href="http://vue-loader.vuejs.org/" target="_blank">vue-loader</a></li>
      <li><a href="https://github.com/vuejs/awesome-vue" target="_blank">awesome-vue</a></li>
    </ul>

    <h2>Search For Stuff</h2>
    <ais-index
      app-id="latency"
      api-key="3d9875e51fbd20c7754e65422f7ce5e1"
      index-name="bestbuy"
    >
      <ais-search-box></ais-search-box>
      <ais-results>
        <template slot-scope="{ result }">
          <p>
            <ais-highlight :result="result" attribute-name="name"></ais-highlight>
          </p>
        </template>
      </ais-results>
    </ais-index>
  </div>
</template>
...

Once you’ve done that, you should be finished! Start up the dev server, type something into the search box, and see the results render near-instantaneously!

Now all that remains is to switch over the API keys to something you own, try out some of the other available components, style them, create custom components, and have fun!