Vue InstantSearch for web

Features

  • Provides pre-built UI components following best practice principles for Vue that remain independent from external frameworks
  • Integrate into your existing UI or app, or use InstantSearch templates
  • Comes with a default CSS theme, completely customizable
  • Manages all business logic for search requests, responses, and states
  • Progressive customization of components (use, extend, or customize)

Version

  • Compatible with all current versions of the underlying <JavaScrip>t library
  • Code is entirely open source and available on GitHub
  • Bootstrap your application, with create-instantsearch-app, NPM, ...

Related Integrations

  • Works with Autocomplete and all our API clients and frameworks

Key links


Get started

Template

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>

Built with Vue on Algolia