Tutorial

Integrating Algolia InstantSearch with Vue.js

Published on January 8, 2018
Default avatar

By Joshua Bemenderfer

Integrating Algolia InstantSearch with Vue.js

While we believe that this content benefits our community, we have not yet thoroughly reviewed it. If you have any suggestions for improvements, please let us know by clicking the “report an issue“ button at the bottom of the tutorial.

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.

main.js
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');

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.

App.vue
<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!

Thanks for learning with the DigitalOcean Community. Check out our offerings for compute, storage, networking, and managed databases.

Learn more about us


About the authors
Default avatar
Joshua Bemenderfer

author

Still looking for an answer?

Ask a questionSearch for more help

Was this helpful?
 
Leave a comment


This textbox defaults to using Markdown to format your answer.

You can type !ref in this text area to quickly search our full set of tutorials, documentation & marketplace offerings and insert the link!

Try DigitalOcean for free

Click below to sign up and get $200 of credit to try our products over 60 days!

Sign up

Join the Tech Talk
Success! Thank you! Please check your email for further details.

Please complete your information!

Get our biweekly newsletter

Sign up for Infrastructure as a Newsletter.

Hollie's Hub for Good

Working on improving health and education, reducing inequality, and spurring economic growth? We'd like to help.

Become a contributor

Get paid to write technical tutorials and select a tech-focused charity to receive a matching donation.

Welcome to the developer cloud

DigitalOcean makes it simple to launch in the cloud and scale up as you grow — whether you're running one virtual machine or ten thousand.

Learn more
DigitalOcean Cloud Control Panel