# Algolia InstantSearch

• Getting started with Laravel Scout and Vue Instant Search

La gente de Algolia defiende que las búsquedas en una aplicación se deberían realizar en el frontend, y no en el backend. Esto es porque el acceso a los resultados es instantáneo y además liberamos al servidor de procesar cada petición de búsqueda.

Dicho esto, vamos a ver cómo abordar esto con la versión para Vue de InstantSearch.js, la librería frontend de Algolia.

# Instalar InstantSearch.js

Añadimos vue-instantsearch como dependencia mediante NPM:

npm install -S vue-instantsearch

En nuestro archivo app.js, añadimos lo siguiente:

import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);

# Crear el componente de búsqueda

Cualquier componente de la librería InstantSearch tiene que ir dentro de otro componente llamado <ais-index>. Este se encarga de manejar las llamadas con el servidor de Algolia.

Por ejemplo, si utilizamos un índice llamado "contacts":

<ais-index
	app-id="{{ config('scout.algolia.id') }}"
    api-key="{{ env('ALGOLIA_SEARCH') }}"
    index-name="contacts"
>
    <ais-input placeholder="Search contacts..."/>

	<ais-results>
	   <template scope="{ result }">
		   <div>
			   <h1>{{ result.name }}</h1>
			   <h4>{{ result.company }}</h4>
			   <ul>
				   <li>{{ result.email }}</li>
			   </ul>
		   </div>
	   </template>
	</ais-results>
</ais-index>