Algolia Instantsearch Snippet

August 19, 2020

ais-highlight vs ais-snippet

ais-highlight show the entire content, with the search term highlighted.

ais-snippet shpw the relevant part of the content (especially long text), with the search term highlighted.

Setup snippet

To use snippet, you need to setup your Indices.

Goto Algolia Dashboard -> Indices -> Configuration -> PAGINATION AND DISPLAY -> Snippeting, add Attributes to snippet. Select attributes with long text where you might not want to display the entire text.



        <ais-search-box />

          <div slot="item" slot-scope="{ item }">
            <!-- show name -->
            <h1><ais-highlight attribute="name" :hit="item"/></h1>

            <!-- show content with snippet: need to setup Snipetting in Indices -->
            <div><ais-snippet attribute="content" :hit="item"/></div>


  // ...

/* prevent highlight overwrite font-size */
.ais-Highlight {
  font-size: inherit;
.ais-Highlight-highlighted {
  font-size: inherit;

NOTE: Refer to Setup Algolia InstantSearch on Nuxt/Vue for complete code.

This work is licensed under a
Creative Commons Attribution-NonCommercial 4.0 International License.