Skip to main content
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 $searchKey this method 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 ships with Vue by default. You only have to add vue-instantsearch as a dependency and register it as a Vue plugin: 
npm install vue-instantsearch algoliasearch
Then, open up your resources/js/app.js and add the following lines just after the window.Vue = require('vue'); line: 
import algoliasearch from "algoliasearch/lite";
import InstantSearch from "vue-instantsearch/vue3/es";

Vue.use(InstantSearch);
To compile the JavaScript into the app.js bundle file while working on it, run: 
npm run watch

​
Scaffold a search interface

The following example shows a small search interface with a minimal design. Since the template needs access to the application ID and API key, you need to move the Vue initialization into a Blade template.
Blade
<div id="app">
  <!-- In a default Laravel app, Vue will render inside an #app div -->
  <ais-instant-search
    :search-client="searchClient"
    index-name="{{ (new App\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>

<script>
new Vue({
  data: function() {
    return {
      searchClient: algoliasearch(
        '{{ config('scout.algolia.id') }}',
        '{{ Algolia\ScoutExtended\Facades\Algolia::searchKey(App\Article::class) }}',
      ),
    };
  },
  el: '#app',
});
</script>
You can refer to the Vue InstantSearch documentation to learn more about Vue InstantSearch and its components.