Skip to main content
Signature
<ais-highlight
  attribute="string"
  :hit="object"
  // Optional parameters
  highlighted-tag-name="string"
  :class-names="object"
/>

Import

  • Component
  • Plugin
To ensure optimal bundle sizes, see Optimize build size.
Vue
import { AisHighlight } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

export default {
  components: {
    AisHighlight
  },
  // ...
};

About this widget

Displays the highlighted attributes of your search results. It isn’t a widget but a helper function that works with the ais-hits or ais-infinite-hits widgets.

Examples

Basic usage

Vue
<ais-highlight attribute="name" :hit="hit" />

Access a nested property

Given this record:
JSON
{
  "objectID": 1,
  "meta": {
    "name": "my name"
  }
}
Access the highlighted version by specifying the path separating levels with dots:
Vue
<ais-highlight attribute="meta.name" :hit="hit" />

Props

attribute
string
required
The highlighted attribute.Specify a dot-separated value for nested objects, like actor.name.
Vue
<ais-highlight
  [...]
  attribute="name"
/>
hit
object
required
The original hit object provided to the function. It contains all the data for that result, including the highlighted parts.
The hit object must have a _highlightResult[attribute].value property.
Vue
<ais-highlight
  [...]
  :hit="hit"
/>
highlighted-tag-name
string
default:"mark"
The HTML element that wraps the highlight.
Vue
<ais-highlight
  [...]
  highlighted-tag-name="em"
/>
class-names
object
default:"{}"
To customize the appearance, override the appropriate class in your widget theme.
  • ais-Highlight. The root element of the widget.
  • ais-Highlight-highlighted. The highlighted part.
Vue
<ais-highlight
  [...]
  :class-names="{
    'ais-Highlight': 'MyCustomHighlight',
    'ais-Highlight-highlighted': 'MyCustomHighlightHighlighted',
  }"
/>

HTML output

HTML
<span class="ais-Highlight">
  This is the <mark class="ais-Highlight-highlighted">highlighted text</mark>
</span>
I