Vue InstantSearch for web
What is Algolia

What is Algolia

Algolia is a hosted, API-first platform used to build world-class search & discovery experiences. 

Start building quickly using libraries for every major language and framework. Scale your solution with a platform that serves over 85 billion queries for more than 13k customers every month.

Algolia UI Components

Add instant-search to Vue applications

Vue InstantSearch UI library is 

  • Pre-built, customizable and flexible UI widgets to create your own search experiences -  explore the showcase
  • Has server side rendering and routing capabilities
  • Open source, production-ready and maintained by Algolia 

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

Key links


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>
Get started for freeExplore all developer docs

Built with Vue on Algolia

Showcase
Demo

Restaurant Search

This app shows how to search for restaurants in your neighborhood using geo search and Vue

  • vue
  • typescript