ais-snippet

Shortens attributes from hits for display in search results.

Signature

<ais-snippet
  attribute="string"
  :hit="object"
  // Optional parameters
  highlighted-tag-name="string"
  :class-names="object"
/>

Import

Component

To ensure optimal bundle sizes, see Optimize build size.

Vue

import { AisSnippet } from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

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

Plugin

This imports all widgets, even the ones you don’t use. For more information, see Get started with Vue InstantSearch.

JavaScript

import Vue from "vue";
import InstantSearch from "vue-instantsearch";
// Use "vue-instantsearch/vue3/es" for Vue 3

Vue.use(InstantSearch);

See this widget in action

Preview this widget and its behavior.

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, set them from the Algolia dashboard, the CLI, or with the API (using the attributesToSnippet parameter):

Vue

<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

Vue

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

Access a nested property

Given this record:

JSON

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

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

Vue

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

Props

attribute · string · required

The attribute of the record to snippet. For deeply nested objects, specify a dot-separated value like actor.bio.

Vue

<ais-snippet
  [...]
  attribute="description"
/>

hit · object · required

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

Vue

<ais-snippet
  [...]
  :hit="hit"
/>

highlighted-tag-name · string · default: "mark"

The name of the HTML element to wrap the highlighted parts of the string.

Vue

<ais-snippet
  [...]
  highlighted-tag-name="em"
/>

class-names · object · default: "{}"

The CSS classes you can override:

• ais-Snippet. The root element of the widget.

Vue

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

HTML output

HTML

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