Skip to main content
Vue InstantSearch is the Vue.js library for building search interfaces with Algolia. It provides a set of Vue components that connect to Algolia’s search API.

​
Core Components

Vue InstantSearch provides several core components for building search experiences:

​
Root Components

ais-instant-search

Root component that connects your Vue app to Algolia

ais-index

Component for managing multiple indices

​
Configuration Components

ais-configure

Configure search parameters declaratively

​
Installation

Install Vue InstantSearch with npm or yarn: 
npm install vue-instantsearch algoliasearch

yarn add vue-instantsearch algoliasearch

​
Quick Start

Here’s a basic example of using Vue InstantSearch: 
<template>
  <ais-instant-search
    :search-client="searchClient"
    index-name="your_index_name"
  >
    <ais-configure :hits-per-page.camel="10" />
    <!-- Add your search UI components here -->
  </ais-instant-search>
</template>

<script>
import algoliasearch from 'algoliasearch/lite';
import { AisInstantSearch, AisConfigure } from 'vue-instantsearch';

export default {
  components: {
    AisInstantSearch,
    AisConfigure,
  },
  data() {
    return {
      searchClient: algoliasearch(
        'YourApplicationID',
        'YourSearchOnlyAPIKey'
      ),
    };
  },
};
</script>

​
Component Naming Convention

All Vue InstantSearch components use the ais- prefix (e.g., ais-search-box, ais-hits). This follows the standard Vue component naming conventions and helps avoid naming conflicts.

​
Vue 2 and Vue 3 Support

Vue InstantSearch supports both Vue 2 and Vue 3. The library automatically detects which version you’re using and adapts accordingly.

​
Server-Side Rendering (SSR)

Vue InstantSearch supports server-side rendering with frameworks like Nuxt.js. For SSR implementations, use the createServerRootMixin utility.

​
TypeScript Support

Vue InstantSearch is written in JavaScript but provides TypeScript type definitions for better developer experience.