> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Client-side search

> Learn how to perform search operations directly from the client, using JavaScript.

export const ApplicationID = () => <Tooltip tip="A unique alphanumeric string that identifies an Algolia application." cta="Application ID (dashboard)" href="https://dashboard.algolia.com/account/api-keys">
    application ID
  </Tooltip>;

export const APIKey = () => <Tooltip tip="An alphanumeric string that controls access to the Algolia APIs. It defines what actions are allowed, such as searching an index or adding new records." cta="API key" href="/doc/guides/security/api-keys">
    API key
  </Tooltip>;

**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 PHP icon=code theme={"system"}
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.

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

## 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](/doc/guides/building-search-ui/what-is-instantsearch/vue) 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:

```sh Command line icon=square-terminal theme={"system"}
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:

<CodeGroup>
  ```js Vue3 icon=code theme={"system"}
  import algoliasearch from "algoliasearch/lite";
  import InstantSearch from "vue-instantsearch/vue3/es";

  Vue.use(InstantSearch);
  ```

  ```js Vue2 icon=code theme={"system"}
  import algoliasearch from "algoliasearch/lite";
  import InstantSearch from "vue-instantsearch";

  Vue.use(InstantSearch);
  ```
</CodeGroup>

To compile the JavaScript into the `app.js` bundle file while working on it, run:

```sh Command line icon=square-terminal theme={"system"}
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 <ApplicationID /> and <APIKey />,
you need to move the Vue initialization into a Blade template.

```blade Blade icon=code theme={"system"}
<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](/doc/guides/building-search-ui/what-is-instantsearch/vue) to learn more about Vue InstantSearch and its components.