> ## 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-highlight

> Visually highlights matched terms in search results.

<div className="not-prose algolia-flavor-switcher">
  <div className="afs-dropdown">
    <div className="afs-trigger" role="button" tabIndex="0" aria-haspopup="listbox">
      <span className="afs-current">Vue</span>

      <svg className="afs-chevron lucide lucide-chevron-down" width="24" height="24" viewBox="0 0 24 24" fill="none" stroke="currentColor" strokeWidth="2" strokeLinecap="round" strokeLinejoin="round" aria-hidden="true">
        <path d="m6 9 6 6 6-6" />
      </svg>
    </div>

    <ul className="afs-menu" role="listbox">
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/highlight/js"><span className="afs-option-name">JavaScript</span><span className="afs-option-lib">InstantSearch.js</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/highlight/react"><span className="afs-option-name">React</span><span className="afs-option-lib">React InstantSearch</span></a></li>
      <li role="option" aria-selected="true"><a className="afs-option is-current" href="/doc/api-reference/widgets/highlight/vue"><span className="afs-option-name">Vue</span><span className="afs-option-lib">Vue InstantSearch</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/highlight/ios"><span className="afs-option-name">iOS</span><span className="afs-option-lib">InstantSearch iOS</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/highlight/android"><span className="afs-option-name">Android</span><span className="afs-option-lib">InstantSearch Android</span></a></li>
      <li role="option" aria-selected="false"><a className="afs-option" href="/doc/api-reference/widgets/highlight/flutter"><span className="afs-option-name">Flutter</span><span className="afs-option-lib">Algolia for Flutter</span></a></li>
    </ul>
  </div>
</div>

```vue Signature theme={"system"}
<ais-highlight
  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 { AisHighlight } from "vue-instantsearch";
    // Use "vue-instantsearch/vue3/es" for Vue 3

    export default {
      components: {
        AisHighlight
      },
      // ...
    };
    ```
  </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-highlight" horizontal>
  Preview this widget and its behavior.
</Card>

## About this widget

Displays the [highlighted attributes](/doc/guides/building-search-ui/ui-and-ux-patterns/highlighting-snippeting/vue) of your search results.
It isn't a widget but a helper function that works with the [`ais-hits`](/doc/api-reference/widgets/hits/vue)
or [`ais-infinite-hits`](/doc/api-reference/widgets/infinite-hits/vue) widgets.

## Examples

### Basic usage

```vue Vue icon=code theme={"system"}
<ais-highlight attribute="name" :hit="hit" />
```

### Access a nested property

Given this record:

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

Access the highlighted version by specifying the path separating levels with dots:

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

## Props

<ParamField body="attribute" type="string" required>
  The highlighted attribute.

  Specify a dot-separated value for nested objects, like `actor.name`.

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

<ParamField body="hit" type="object" required>
  The original [`hit` object](/doc/guides/building-search-ui/going-further/backend-search/in-depth/understanding-the-api-response#hits)
  provided to the function.
  It contains all the data for that result, including the highlighted parts.

  <Note>The `hit` object must have a `_highlightResult[attribute].value` property.</Note>

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

<ParamField body="highlighted-tag-name" type="string" default="mark">
  The HTML element that wraps the highlight.

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

<ParamField body="class-names" type="object" default="{}">
  To customize the appearance,
  override [the appropriate class](/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue#style-your-widgets) in your widget theme.

  * `ais-Highlight`. The root element of the widget.
  * `ais-Highlight-highlighted`. The highlighted part.

  ```vue Vue icon=code theme={"system"}
  <ais-highlight
    [...]
    :class-names="{
      'ais-Highlight': 'MyCustomHighlight',
      'ais-Highlight-highlighted': 'MyCustomHighlightHighlighted',
    }"
  />
  ```
</ParamField>

## HTML output

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