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

# ais-trending-facets

> Shows a list of trending facet values.

```vue Signature theme={"system"}
<ais-trending-facets
  facet-name="string"
  // Optional parameters
  :limit="number"
  :threshold="number"
  :fallback-parameters="object"
  :escapeHTML="boolean"
  :transform-items="function"
  :class-names="object"
/>
```

## Import

**Component**

To ensure optimal bundle sizes,
see [Optimize build size](https://www.algolia.com/doc/guides/building-search-ui/going-further/improve-performance/vue.md#optimize-build-size).

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

export default {
  components: {
    AisTrendingFacets,
  },
  // ...
};
```

**Plugin**

This imports all widgets, even the ones you don't use.
For more information, see [Get started with Vue InstantSearch](https://www.algolia.com/doc/guides/building-search-ui/getting-started/vue.md).

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

Vue.use(InstantSearch);
```

## About this widget

Use `ais-trending-facets` to display facet values identified by the [trending facet values](https://www.algolia.com/doc/guides/algolia-recommend/overview#trending-items-and-trending-facets-value) model,
such as brands whose products are gaining popularity.

See also: [Set up Algolia Recommend](https://www.algolia.com/doc/guides/algolia-recommend/how-to/set-up.md)

## Examples

```vue Vue icon=code theme={"system"}
<ais-trending-facets facet-name="brand">
  <template v-slot:item="{ item }">
    {{ item.facetValue }}
  </template>
</ais-trending-facets>
```

## Props

**facet-name** `string` *required*

The facet (An attribute in your records that lets users filter or group results (for example, by color, brand, or price).) attribute for which to retrieve trending values, such as `brand`.
The attribute must be included in the trending facet values model.

```vue Vue icon=code theme={"system"}
<ais-trending-facets facet-name="brand" />
```

**limit** `number`

The maximum number of trending facet values to retrieve.
The widget may return fewer values, depending on the available recommendations and request parameters.
If you omit `limit` or set it to `0`,
the widget returns all available trending facet values.

```vue Vue icon=code theme={"system"}
<ais-trending-facets
  // ...
  :limit="4"
/>
```

**threshold** `number`

The recommendation score threshold (0 to 100).
The widget only returns facet values with a score greater than this threshold.

```vue Vue icon=code theme={"system"}
<ais-trending-facets
  // ...
  :threshold="80"
/>
```

**fallback-parameters** `Omit\<SearchParameters, hitsPerPage | length | offset | page\>`

List of [search parameters](https://www.algolia.com/doc/api-reference/search-api-parameters.md)
to send as an extra filter (A filter is a condition that limits which records Algolia returns. Filters often use one or more facet-value pairs, such as brand:Apple AND color:red. You can also filter by numeric values, dates, tags, booleans, or geographic constraints.) set when there aren't enough recommendations.

```vue Vue icon=code theme={"system"}
<ais-trending-facets
  // ...
  :fallback-parameters="{ filters: 'category:Book' }"
/>
```

**escapeHTML** `boolean` (default: true)

Whether to escape HTML tags from recommendations string values.

```vue Vue icon=code theme={"system"}
<ais-trending-facets
  // ...
  :escapeHTML="false"
/>
```

**transform-items** `function` (default: items => items)

A function to transform or reorder recommendations before the widget displays them.
It returns an array of items with the same structure.

> [!NOTE]
>
> To [prevent creating infinite loops](https://support.algolia.com/hc/en-us/articles/4406511683217-Vue-InstantSearch-How-do-I-prevent-infinite-loops),
> avoid passing arrays, objects, or functions directly in the template.
> These values aren't referentially equal on each render,
> which causes the widget to re-register every time.
> Instead, define them in your component's `data` option and reference them in the template.

```vue Vue icon=code theme={"system"}
<template>
  <!-- ... -->
  <ais-trending-facets
    facet-name="brand"
    :transform-items="transformItems"
  />
</template>

<script>
  export default {
    methods: {
      transformItems(items) {
        return items.map(item => ({
          ...item,
          facetValue: item.facetValue.toUpperCase(),
        }));
      },
    },
  };
</script>
```

**class-names** `object` (default: \{})

The [CSS classes you can override](https://www.algolia.com/doc/guides/building-search-ui/widgets/customize-an-existing-widget/vue.md#style-your-widgets):

* `ais-TrendingFacets`. The widget's root element.
* `ais-TrendingFacets--empty`. The root element without results.
* `ais-TrendingFacets-title`. The widget's title element.
* `ais-TrendingFacets-container`. The container of the list element.
* `ais-TrendingFacets-list`. The list of trending facet values.
* `ais-TrendingFacets-item`. The list item.

```vue Vue icon=code theme={"system"}
<ais-trending-facets
  // ...
  :class-names="{
    'ais-TrendingFacets': 'MyCustomTrendingFacets',
    'ais-TrendingFacets-list': 'MyCustomTrendingFacetsList',
    // ...
  }"
/>
```

## Customize the UI

**default**

The slot to override the complete DOM output of the widget.
The widget only uses this slot if you don't provide any other slot.

**Scope**

* `items: object[]`. The trending facet values. Each item has `facetName`, `facetValue`, and `_score` properties.

```vue Vue icon=code theme={"system"}
<ais-trending-facets facet-name="brand">
  <template v-slot="{ items }">
    <ul>
      <li
        v-for="item in items"
        :key="`${item.facetName}:${item.facetValue}`"
      >
        {{ item.facetValue }}
      </li>
    </ul>
  </template>
</ais-trending-facets>
```

**item**

The slot to override the DOM output of each trending facet value.
If you don't provide it, the widget displays the `facetValue` as plain text.

**Scope**

* `item: object`. A single trending facet value with `facetName`, `facetValue`, and `_score` properties.

```vue Vue icon=code theme={"system"}
<ais-trending-facets facet-name="brand">
  <template v-slot:item="{ item }">
    <strong>{{ item.facetValue }}</strong>
  </template>
</ais-trending-facets>
```

**header**

The slot to override the DOM output of the title header.
The widget doesn't render the header when there are no recommendations.
If you don't provide it, the widget displays "Trending" as the title.

**Scope**

* `items: object[]`. The trending facet values.
* `translations: object`. The widget's translations, such as `title`.
* `classNames: object`. The widget's CSS classes, such as `title`.

```vue Vue icon=code theme={"system"}
<ais-trending-facets facet-name="brand">
  <template v-slot:header="{ items, classNames }">
    <h2 :class="classNames.title">Trending brands ({{ items.length }})</h2>
  </template>
</ais-trending-facets>
```

**empty**

The slot to override the DOM output when there are no trending facet values.
If you don't provide it, the widget displays "No results".

```vue Vue icon=code theme={"system"}
<ais-trending-facets facet-name="brand">
  <template v-slot:empty>
    <p>No trending brands.</p>
  </template>
</ais-trending-facets>
```

## HTML output

```html HTML icon=code-xml theme={"system"}
<section class="ais-TrendingFacets">
  <h3 class="ais-TrendingFacets-title">Trending</h3>
  <div class="ais-TrendingFacets-container">
    <ol class="ais-TrendingFacets-list">
      <li class="ais-TrendingFacets-item">...</li>
      <li class="ais-TrendingFacets-item">...</li>
      <li class="ais-TrendingFacets-item">...</li>
    </ol>
  </div>
</section>
```