Vue InstantSearch for web

Vue + Algolia

Build search experiences with UI components and libraries.

Sign up
What is Algolia

What is Algolia

Algolia empowers modern developers to build world class search and discovery experiences without any DevOps.
Libraries with every major language and framework make it easy to enrich your users' experiences. 

Learn more about the Algolia products
Vue InstantSearch

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. It has server side rendering and routing capabilities and is Open source, production-ready and maintained by Algolia.

Get started with Vue InstantSearch

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

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>
    2
    body {
    3
      font-family: sans-serif;
    4
      padding: 1em;
    5
    }
    6
    </style>
  • Search
    1
    <script>
    2
    import algoliasearch from 'algoliasearch/lite';
    3
    import 'instantsearch.css/themes/satellite-min.css';
    4
    5
    export default {
    6
      data() {
    7
        return {
    8
          searchClient: algoliasearch(
    9
            'B1G2GM9NG0',
    10
            'aadef574be1f9252bb48d4ea09b5cfe5'
    11
          ),
    12
        };
    13
      },
    14
    };
    15
    </script>
Get started for free
Explore developer docs