API Reference / Vue InstantSearch Widgets / ais-snippet
Apr. 24, 2019

ais-snippet

Widget signature 
<ais-snippet
  attribute="string"
  :hit="object"
  // Optional parameters
  highlighted-tag-name="string"
  :class-names="object"
/>
See code examples
See Live example

About this widget

The ais-snippet widget displays snippeted attributes of your search results.

This component leverages the snippeting feature of Algolia and is designed to work with the ais-hits or ais-infinite-hits widget.

The attribute must be set in attributesToSnippet, either inside the Algolia dashboard or at runtime:

Copy
1

<ais-configure :attributesToSnippet="['description']"/>

Examples

Basic usage

Copy
1

<ais-snippet attribute="description" :hit="hit" />

Access a nested property

Given this record:

Copy
1
2
3
4
5
6

{
  "objectID": 1,
  "meta": {
    "description": "my description"
  }
}

You can access the snippeted version by specifying the path separating levels with dots:

Copy
1

<ais-snippet attribute="meta.description" :hit="hit" />

Props

attribute
type: string
Required

The attribute of the record to snippet. You can give a dot-separated value for deeply nested objects, like actor.name.
Copy
1
2
3
4

<ais-snippet
  [...]
  attribute="description"
/>
hit
type: object
Required

The original hit object provided to the function. For this to work, the provided object must have a _snippetResult[attribute].value property.
Copy
1
2
3
4

<ais-snippet
  [...]
  :hit="hit"
/>
highlighted-tag-name
type: string
default: "mark"
Optional

The name of the HTML element to wrap the highlighted parts of the string.
Copy
1
2
3
4

<ais-snippet
  [...]
  highlighted-tag-name="em"
/>
class-names
type: object
default: {}
Optional

The CSS classes to override.

  • ais-Snippet: the root element of the widget.
  • ais-Snippet-highlighted: the highlighted part.
Copy
1
2
3
4
5
6
7

<ais-snippet
  [...]
  :class-names="{
    'ais-Snippet': 'MyCustomSnippet',
    'ais-Snippet-highlighted': 'MyCustomSnippetHighlighted',
  }"
/>

HTML output

Copy
1

<span class="ais-Snippet">This is the <mark class="ais-Snippet-highlighted">highlighted text</mark></span>

Did you find this page helpful?

Vue InstantSearch v2