Vue + Algolia

Get started

Template (get a free account here)

1<template>
2  <ais-instant-search :search-client="searchClient" index-name="demo_ecommerce">
3    <ais-search-box />
4    <ais-hits>
5      <template v-slot:item="{ item }">
6        <h2>{{ item.name }}</h2>
7      </template>
8    </ais-hits>
9  </ais-instant-search>
10</template>

CSS

1<style>
2body {
3  font-family: sans-serif;
4  padding: 1em;
5}
6</style>

Search

1<script>
2import algoliasearch from 'algoliasearch/lite';
3import 'instantsearch.css/themes/satellite-min.css';
4
5export default {
6  data() {
7    return {
8      searchClient: algoliasearch(
9        'B1G2GM9NG0',
10        'aadef574be1f9252bb48d4ea09b5cfe5'
11      ),
12    };
13  },
14};
15</script>