UI libraries / Vue InstantSearch / Widgets

ais-snippet

Signature 
<ais-snippet
  attribute="string"
  :hit="object"
  // Optional parameters
  highlighted-tag-name="string"
  :class-names="object"
/>
Import
Copy 
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.

See code examples
See live example

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):

Copy 
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

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

Parameter Description
attribute
type: string
Required

The attribute of the record to snippet. For deeply nested objects, specify a dot-separated value like actor.bio.
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 you can override:

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

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

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 v4