Client-side search

You should perform searches directly from your frontend, using JavaScript. This drastically improves search response times, and reduces the load and traffic on your servers.

Generate search keys

With client-side implementations, only use search API keys. Scout Extended provides the searchKey method to generate a search key for each searchable class:

PHP

use Algolia\ScoutExtended\Facades\Algolia;

$searchKey = Algolia::searchKey(Article::class);

The generated search key restricts searches to the given Searchable class, and no other Searchable classes.

The searchKey method uses the application cache to return the same search key until its expiry, 24 hours after generation.

Integration with Vue InstantSearch

Scout Extended doesn’t dictate which JavaScript solution to use. You’re free to pick your favorite InstantSearch flavor. The example below covers the Vue InstantSearch integration.

Install Vue InstantSearch

Laravel doesn’t ship with a frontend framework, so install Vue with the Vite plugin, then add vue-instantsearch and algoliasearch as dependencies:

Command line

npm install vue @vitejs/plugin-vue vue-instantsearch algoliasearch

vite.config.js

import { defineConfig } from "vite";
import laravel from "laravel-vite-plugin";
import vue from "@vitejs/plugin-vue";

export default defineConfig({
  plugins: [
    laravel({
      input: ["resources/css/app.css", "resources/js/app.js"],
      refresh: true,
    }),
    vue(),
  ],
});

Then, open up your resources/js/app.js file, create the Vue app, and register InstantSearch:

resources/js/app.js

import { createApp } from "vue";
import { liteClient as algoliasearch } from "algoliasearch/lite";
import InstantSearch from "vue-instantsearch/vue3/es";

const app = createApp({
  data() {
    return {
      searchClient: algoliasearch(
        window.algoliaConfig.appId,
        window.algoliaConfig.searchKey,
      ),
    };
  },
});

app.use(InstantSearch);
app.mount("#app");

To compile the JavaScript while working on it, run the Vite development server:

Command line

npm run dev

Scaffold a search interface

The following example shows a small search interface with a minimal design. Since the frontend needs access to the and , expose them from your Blade template before loading the bundle:

Blade

<script>
  window.algoliaConfig = {
    appId: '{{ config('scout.algolia.id') }}',
    searchKey: '{{ Algolia\ScoutExtended\Facades\Algolia::searchKey(App\Models\Article::class) }}',
  };
</script>

@vite(['resources/css/app.css', 'resources/js/app.js'])

<div id="app">
  <ais-instant-search
    :search-client="searchClient"
    index-name="{{ (new App\Models\Article)->searchableAs() }}"
  >
    <ais-search-box placeholder="Search articles..."></ais-search-box>

    <ais-hits>
      <template v-slot:item="{ item }">
        <div>
          <h1>@{{ item.title }}</h1>
          <h4>@{{ item.summary }}</h4>
        </div>
      </template>
    </ais-hits>
  </ais-instant-search>
</div>

You can refer to the Vue InstantSearch documentation to learn more about Vue InstantSearch and its components.

Get started

Indexing

Searching

Production

Advanced use cases

Client-side search

Generate search keys

Integration with Vue InstantSearch

Install Vue InstantSearch

Scaffold a search interface

​Generate search keys

​Integration with Vue InstantSearch

​Install Vue InstantSearch

​Scaffold a search interface

Generate search keys

Integration with Vue InstantSearch

Install Vue InstantSearch

Scaffold a search interface