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.
Code
<template> <div> <client-only> <ais-instant-search :search-client="searchClient" index-name="live" > <ais-search-box /> <ais-hits> <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> </div> </ais-hits> </ais-instant-search> </client-only> </div></template><script> // ...</script><style>/* prevent highlight overwrite font-size */.ais-Highlight { font-size: inherit;}.ais-Highlight-highlighted { font-size: inherit;}</style>NOTE: Refer to Setup Algolia InstantSearch on Nuxt/Vue for complete code.