Get started with Vue InstantSearch

Use Algolia and Vue InstantSearch to build a search UI.

Vue InstantSearch is a Vue.js library that lets you create a search results experience with Algolia. This tutorial generates code to:

• Display and format the search box and results
• Use pre-built UI components (widgets) to filter results

View demoView source code

Before you begin

This tutorial assumes you have Vue knowledge and have installed Vue InstantSearch.

Tutorial

In this tutorial, you’ll add an Algolia search interface to some starter code.

Add starter code

To generate some starter code, use the create-instantsearch-app installed with Vue InstantSearch.

In a terminal, paste:

npx create-instantsearch-app ais-ecommerce-demo-app --template "Vue InstantSearch"

This generates a folder structure on your machine:

ais-ecommerce-demo-app/
├── node_modules/
├── src/
├──── App.vue
├──── main.js
├── package.json
├── README.md
└── yarn.lock

create-instantsearch-app provides the index data, all necessary code, and predefined credentials (application ID and API key).

Initialization

If you’re using your app instead of create-instantsearch-app, initialize it by changing the contents of main.js to include the Vue InstantSearch library:

Vue 3

import { createApp } from "vue";
import App from "./App.vue";
import InstantSearch from "vue-instantsearch/vue3/es";

const app = createApp(App);
app.use(InstantSearch);
app.mount("#app");

Add the search user interface code

Open src/App.vue and replace the whole file with the following:

Vue

<template>
  <ais-instant-search :search-client="searchClient" index-name="demo_ecommerce">
    <ais-search-box />
    <ais-hits>
      <template v-slot:item="{ item }">
        <h2>{{ item.name }}</h2>
      </template>
    </ais-hits>
  </ais-instant-search>
</template>

<script>
import { liteClient as algoliasearch } from 'algoliasearch/lite';
import 'instantsearch.css/themes/algolia-min.css';

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

<style>
body {
  font-family: sans-serif;
  padding: 1em;
}
</style>

Understand the code

In src/App.js, you’ll see several InstantSearch widgets:

• ais-instant-search is the root Vue InstantSearch component. All other widgets must be wrapped within this widget
• ais-search-box displays a search box for users to type queries into
• ais-hits displays the results from Algolia, based on the query.

Run the project

In your terminal, type:

cd ais-ecommerce-demo-app
npm start

Open your browser and go to http://localhost:3000.

You’ll see this:

Add more widgets

To enhance your search UI, add these widgets:

• ais-clear-refinements displays a button to clear the current refinements
• ais-refinement-list displays a list of brands to filter the search
• ais-configure passes search parameters. In this example, it sets the hitsPerPage to 8. It doesn’t render anything to the DOM itself.
• ais-pagination implements paging logic

Open the file src/App.vue and update it:

Vue

<template>
  <ais-instant-search index-name="demo_ecommerce" :search-client="searchClient">
    <div class="left-panel">
      <ais-clear-refinements />
      <h2>Brands</h2>
      <ais-refinement-list attribute="brand" searchable />
      <ais-configure :hitsPerPage="8" />
    </div>
    <div class="right-panel">
      <ais-search-box />
      <ais-hits>
        <template v-slot:item="{ item }">
          <h2>{{ item.name }}</h2>
        </template>
      </ais-hits>
      <ais-pagination />
    </div>
  </ais-instant-search>
</template>

Alter the styling

The widgets have a predefined style but this can be altered.

To create a two-column layout, replace the content of the style tag with:

CSS

body {
  font-family: sans-serif;
  padding: 1em;
}

.ais-Hits-list {
  margin-top: 0;
  margin-bottom: 1em;
}

.ais-InstantSearch {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 1em;
}

In your browser, after a page refresh, you’ll see this:

Customize hits

Open the file src/App.vue and replace the content of the ais-hits item slot with:

Vue

<template v-slot:item="{ item }">
  <h2>{{ item.name }}</h2>
  <img :src="item.image" align="left" :alt="item.name" />
  <div class="hit-name">
    <ais-highlight attribute="name" :hit="item"></ais-highlight>
  </div>
  <div class="hit-description">
    <ais-highlight attribute="description" :hit="item"></ais-highlight>
  </div>
  <div class="hit-price">{{ item.price }}</div>
</template>

Add formatting

Update the content of the style tag with:

CSS

body {
  font-family: sans-serif;
  padding: 1em;
}

.ais-Hits-list {
  margin-top: 0;
  margin-bottom: 1em;
}

.ais-InstantSearch {
  display: grid;
  grid-template-columns: 1fr 4fr;
  grid-gap: 1em;
}

.ais-Hits-item img {
  margin-right: 1em;
}
.hit-name {
  margin-bottom: 0.5em;
}
.hit-description {
  color: #888;
  font-size: 0.8em;
  margin-bottom: 0.5em;
}

In your browser, after a page refresh, you’ll see this:

For more information about customization, see Customize an existing widget.

Configure the dataset

First:

1. Download the dataset
2. Set up an API client and send your data to Algolia
3. Configure the index with the following code:

PHP

$index->setSettings(array(
  "searchableAttributes" => [
    "brand",
    "name",
    "categories",
    "unordered(description)"
  ],
  "customRanking" => [
    "desc(popularity)"
  ],
  "attributesForFaceting" => [
    "searchable(brand)",
    "type",
    "categories",
    "price"
  ]
));