Algolia Search, Infinity Hits, Highlighting with Laravel/VueJS

Algolia is a hosted search engine, offering full-text, numerical, and faceted search, capable of delivering real-time results from the first keystroke. Algolia’s powerful API lets you quickly and seamlessly implement search within your websites and mobile applications.

In this post we will covering how to do search, infinity hits and query highlight with algolia using with laravel and VueJS. The video below is a demonstration of what we will achieve.

Algolia demonstration with Laravel/VueJS

Setting Up the Application

Install Laravel Scout and Algolia Client API

composer require laravel/scout
composer require algolia/algoliasearch-client-php

Publish laravel scout config with the command below

php artisan vendor:publish --provider=”Laravel\Scout\ScoutServiceProvider”

Set up algolia credentials in your .env. This can be gotten from your algolia dashboard

ALGOLIA_APP_ID=YourApplicationID
ALGOLIA_SECRET=YourAdminAPIKey
MIX_ALGOLIA_APP_ID=YourApplicationID
MIX_ALGOLIA_SEARCH=YourSearchOnlyAPIKey

Install the necessary algolia npm packages to implement the search.

npm install vue-instantsearch algoliasearch instantsearch.css

Open your resources/js/app.js and add this just below the window.Vue = require(‘vue’);

window.Vue = require('vue');
import InstantSearch from 'vue-instantsearch';
Vue.use(InstantSearch);
import 'instantsearch.css/themes/reset.css'

Implementation

Thats all with the setup. Next up will start with the algolia integration. Create a migration along with a model, then add the Searchable trait to the model like so

I will be using some articles I got from New York Times Top Stories API. The articles are hardcoded in a file which is then seeded to the database. This is just so I can have some data in my database which will also then reflects in my algolia dashboard.

Create the Articles.vue and register it in app.js. Then position the articles component in your blade view

Vue.component('articles', require('./components/Articles.vue').default)

The contents of the Articles.vue file which renders the items.

Articles Component

Will be explaining some of the components or items in the Articles.vue above

• The ais-instant-search component is used to configure the credentials for the search. Most importantly the search-client and index-name are passed as props. The search-client contains the authorization while index-name is the table of sort on the registered application in algolia.
• ais-search-box is the form component used to register the query from the user. In this case we override the default form component by creating ours and providing the right targets
• ais-configure in this scenario, it is used to set the hitsPerPage props which is number of items that displays for every new fetch on the page.
• The ais-infinite-hits components is used to display the list of results and also display the Show more results where more results can be fetched. This component therefore houses our custom single-article component.
• The single-article is our custom component that contains our markup and styles for our list of items in the index. The code is shown below
• The ais-highlight in the single-article component widget renders any attribute from a hit into its highlighted form when relevant. It basically marks or highlight the search query on the list of the queried items.

Single Article Component

Thats all with our implementation of aloglia with Laravel and VueJS. The full source code of the project can be found here . Kindly leave a clap if you find the article interesting and use the comment section for any feedback or questions. Thanks for reading.