Algolia InstantSearch
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>