Create a MeiliSearch Laravel Blade Component
Mithicher Baro ・ Sep 28th, 2021 Views

Create a MeiliSearch Laravel Blade Component

What is MeiliSearch?

As stated in their official website - MeiliSearch is an open source, blazingly fast and hyper relevant search-engine that will improve your search experience.

Laravel also supports MeiliSearch out of the box. Feel free to visit the documentation to know more about it:

Install MeiliSearch on a Local Machine

Run the following command in your terminal to download and install meilisearch in your local machine.

curl -L | sh

Then run the following command to start meilisearch in your terminal.


Feel free to checkout their docs:

Let's add some sample index. Your can download a sample books.json data from here:

Then open another terminal and run the following curl command:

curl \
  -X POST '' \
  --data @/Users/your-user-name/Downloads/books.json 

Reusable Autocomplete Search Input

We will attempt to create a reusable search input component for MeiliSearch here by leveraging the power of Laravel's blade components, Alpine.js for a little javascript, and TailwindCSS for styling.

Checkout our latest product - the ultimate tailwindcss page creator 🚀

Install and Configure MeiliSearch With Laravel

composer require meilisearch/meilisearch-php http-interop/http-factory-guzzle

Then updated your .env file with the credentials


To obtain public and private key from meilisearch run the following curl command:

curl -X GET '' \
--header "X-Meili-API-Key: your-master-key

Then go to config/scout.php and update this

'meilisearch' => [
    'host' => env('MEILISEARCH_HOST', 'http://localhost:7700'),
    'key' => env('MEILISEARCH_KEY', null),
    'public_key' => env('MEILISEARCH_PUBLIC_KEY', null),
    'private_key' => env('MEILISEARCH_PRIVATE_KEY', null),

Make sure to install the scout package via the following composer command

composer require laravel/scout

Assuming you have already configured alpine.js and tailwind css in your app.blade.php let us a create a blade component named meilisearch-autocomplete.blade.php inside your resources/views/components folder.

Full component can be found here:

Let's see how it works

	class="form-input bg-gray-50 focus:bg-white border-gray-200 mt-px pl-10 leading-none placeholder-gray-400 shadow-none rounded-lg flex-1 w-full transition duration-150 ease-in-out"
	placeholder="{{ $placeholder }}"

We are adding a x-model that allows us to bind the value of an input element to an Alpine data. Then on every input with a delay of 600 milliseconds search() method is triggered.

		client: null,
		host: '{{ $host }}',
		apiKey: '{{ $publicKey }}',
		state: '',
		searchString: '',
		results: {
			hits: [],
		async search() {
			this.state = 'searching';
			this.results = await this.client.index('{{ $indexName }}')
			this.state = 'finished';
	x-init="client = new MeiliSearch({
		host: host,
		apiKey: apiKey

As stated in the website:

Everything in Alpine starts with the x-data directive.

So we define an x-data along with some initial values. We then initialize the meilisearch client with the required credentials in the x-init directive and put in a local variable to reuse later.

async search() {
	this.state = 'searching';
	this.results = await this.client.index('{{ $indexName }}')
	this.state = 'finished';

How to use it on our blade views

	placeholder="Search books..."
	<a class="flex-1 flex" href="#">
		<div class="w-24 h-32 rounded bg-gray-100 flex-shrink-0 mr-3 border">
			<img :src="result.thumbnailUrl" alt="poster" loading="lazy" class="rounded w-full h-32 object-cover">

		<div class="flex-1">
			<div class="text-gray-800">
				<p class="text-lg mb-1 font-medium leading-tight line-clamp-2" x-text="result.title"></p>
				<p class="text-sm text-gray-500" x-text="result.authors.join(', ')"></p>

			<div class="mt-2 flex space-x-2 items-center leading-none">
				<div class="text-xs text-gray-500 truncate capitialize" x-text="result.categories.join(', ')"></div>
				<div class="text-gray-400">&bull;</div>
				<div class="text-xs text-gray-500" x-text="result.isbn"></div>
				<div class="text-gray-400">&bull;</div>
				<div class="text-xs text-gray-500" x-text="result.pageCount"></div>

			<p class="text-xs mt-2 text-gray-500 line-clamp-3" x-text="result.shortDescription ? result.shortDescription.substr(0, 220) + '...' : result.shortDescription"></p>

So here we have a meilisearch blade component. Feel free to comment and any suggestion for improvement. I have skipped the keyboard navigation part but feel free to use the component and see.

Here are some resources that you should definitely check it out:

Follow me on twitter @mithicher and checkout my codepen

See you next time. Bye 👋

Comments (0)