ais-snippet
<ais-snippet attribute="string" :hit="object" // Optional parameters highlighted-tag-name="string" :class-names="object" />
1
2
3
4
5
6
7
8
9
import { AisSnippet } from 'vue-instantsearch';
// Use 'vue-instantsearch/vue3/es' for Vue 3
export default {
components: {
AisSnippet
},
// ...
};
1. Follow additional steps in Optimize build size to ensure your code is correctly bundled.
2. This imports all the widgets, even the ones you don’t use. Read the Getting started guide for more information.
About this widget
The ais-snippet
widget displays attributes in a shorter form (a snippet). Snippeted attributes are also highlighted.
It uses Algolia’s snippeting feature in combination with the ais-hits
or ais-infinite-hits
widgets.
To determine which attributes should be snippeted, first set them from the Algolia dashboard, the CLI, or with the API (using the attributesToSnippet
parameter):
1
<ais-configure :attributesToSnippet="['description']"/>
With attributesToSnippet
, you can also set the snippet’s size to a specific number of words (it defaults to 10). For example, :attributesToSnippet="['description:5']
.
Examples
Basic usage
1
<ais-snippet attribute="description" :hit="hit" />
Access a nested property
Given this record:
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:
1
<ais-snippet attribute="meta.description" :hit="hit" />
Props
attribute
|
type: string
Required
The attribute of the record to snippet. For deeply nested objects, specify a dot-separated value like |
||
Copy
|
|||
hit
|
type: object
Required
The original |
||
Copy
|
|||
highlighted-tag-name
|
type: string
default: "mark"
Optional
The name of the HTML element to wrap the highlighted parts of the string. |
||
Copy
|
|||
class-names
|
type: object
default: {}
Optional
The CSS classes you can override:
|
||
Copy
|
HTML output
1
<span class="ais-Snippet">This is the <mark class="ais-Snippet-highlighted">highlighted text</mark></span>