> ## Documentation Index
> Fetch the complete documentation index at: https://algolia.com/llms.txt
> Use this file to discover all available pages before exploring further.

# ais-snippet

> Shortens attributes from hits for display in search results.

```vue Signature theme={"system"}
<ais-snippet
  attribute="string"
  :hit="object"
  // Optional parameters
  highlighted-tag-name="string"
  :class-names="object"
/>
```

## Import

<Tabs>
  <Tab title="Component">
    To ensure optimal bundle sizes,
    see [Optimize build size](/doc/guides/building-search-ui/going-further/improve-performance/vue#optimize-build-size).

    ```js Vue icon=code theme={"system"}
    import { AisSnippet } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisSnippet
      },
      // ...
    };
    ```
  </Tab>

  <Tab title="Plugin">
    This imports all widgets, even the ones you don't use.
    For more information, see [Get started with Vue InstantSearch](/doc/guides/building-search-ui/getting-started/vue).

    ```js JavaScript icon="code" theme={"system"}
    import Vue from "vue";
    import InstantSearch from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    Vue.use(InstantSearch);
    ```
  </Tab>
</Tabs>

<Card title="See this widget in action" icon="monitor-play" href="https://instantsearchjs.netlify.app/stories/vue/?selectedKind=ais-snippet" horizontal>
  Preview this widget and its behavior.
</Card>

## About this widget

The `ais-snippet` widget displays attributes in a shorter form (a snippet).
Snippeted attributes are also [highlighted](/doc/api-reference/widgets/highlight/vue).

It uses Algolia's [snippeting feature](/doc/guides/building-search-ui/ui-and-ux-patterns/highlighting-snippeting/vue#snippeting)
in combination with the [`ais-hits`](/doc/api-reference/widgets/hits/vue)
or [`ais-infinite-hits`](/doc/api-reference/widgets/infinite-hits/vue) widgets.

To determine which [attributes](#param-attribute) should be snippeted,
set them from [the Algolia dashboard](https://dashboard.algolia.com/explorer/configuration/snippeting),
[the CLI](/doc/tools/cli/commands/objects/browse#highlighting-and-snippeting),
or with the API (using the [`attributesToSnippet`](/doc/api-reference/api-parameters/attributesToSnippet) parameter):

```vue Vue icon=code theme={"system"}
<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 Vue icon=code theme={"system"}
<ais-snippet attribute="description" :hit="hit" />
```

### Access a nested property

Given this record:

```json JSON icon=braces theme={"system"}
{
  "objectID": 1,
  "meta": {
    "description": "my description"
  }
}
```

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

```vue Vue icon=code theme={"system"}
<ais-snippet attribute="meta.description" :hit="hit" />
```

## Props

<ParamField body="attribute" type="string" required>
  The attribute of the record to snippet.
  For deeply nested objects, specify a dot-separated value like `actor.bio`.

  ```vue Vue icon=code theme={"system"}
  <ais-snippet
    [...]
    attribute="description"
  />
  ```
</ParamField>

<ParamField body="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.

  ```vue Vue icon=code theme={"system"}
  <ais-snippet
    [...]
    :hit="hit"
  />
  ```
</ParamField>

<ParamField body="highlighted-tag-name" type="string" default="mark">
  The name of the HTML element to wrap the highlighted parts of the string.

  ```vue Vue icon=code theme={"system"}
  <ais-snippet
    [...]
    highlighted-tag-name="em"
  />
  ```
</ParamField>

<ParamField body="class-names" type="object" default="{}">
  The [CSS classes you can override](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#style-your-widgets):

  * `ais-Snippet`. The root element of the widget.

  ```vue Vue icon=code theme={"system"}
  <ais-snippet
    [...]
    :class-names="{
      'ais-Snippet': 'MyCustomSnippet',
    }"
  />
  ```
</ParamField>

## HTML output

```html HTML icon=code-xml theme={"system"}
<span class="ais-Snippet">
  This is the <mark class="ais-Snippet-highlighted">highlighted text</mark>
</span>
```