---

title: PopularSearch

---

# PopularSearch

Renders a popular search item which receives the suggestion that will be rendered as a prop. It
exposes a default slot to change the popular search content. If the slot is not overridden,
it will render the suggestion query by default.

## Props

| Name                    | Description                                           | Type                    | Default       |
| ----------------------- | ----------------------------------------------------- | ----------------------- | ------------- |
| <code>suggestion</code> | The suggestion to render and use in the default slot. | <code>Suggestion</code> | <code></code> |

## Slots

| Name                 | Description            | Bindings<br />(name - type - description)                                                                                                                                                                                                      |
| -------------------- | ---------------------- | ---------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| <code>default</code> | Popular Search content | **v-bind** <code>Object</code> - `BaseSuggestion` default slot scope: **suggestion** <code>Suggestion</code> - Suggestion data<br /> **query** <code>string</code> - The query that the suggestion belongs to<br /> **filter** <code>Filter \\ | undefined</code> - Suggestion's filter |

## Events

A list of events that the component will emit:

- [`UserSelectedAPopularSearch`](https://github.com/empathyco/x/blob/main/packages/x-components/src/wiring/events.types.ts):
  the event is emitted after the user clicks the button. The event payload is the popular search
  data.

## Examples

This component expects just a suggestion as a prop to be rendered. It has a slot to override the
content. By default, it renders the suggestion query of the popular search.

### Basic usage

```vue live
<template>
  <PopularSearch :suggestion="suggestion" />
</template>

<script setup>
import { PopularSearch } from "@empathyco/x-components/popular-searches";
import { ref } from "vue";
const suggestion = ref({
  modelName: "PopularSearch",
  query: "tshirt",
  facets: [],
});
</script>
```

### Custom usage

```vue live
<template>
  <PopularSearch :suggestion="suggestion">
    <template #default="{ suggestion }">
      <TrendingIcon />
      <span :aria-label="suggestion.query">{{ suggestion.query }}</span>
    </template>
  </PopularSearch>
</template>

<script setup>
import { PopularSearch } from "@empathyco/x-components/popular-searches";
import { TrendingIcon } from "@empathyco/x-components";
import { ref } from "vue";
const suggestion = ref({
  modelName: "PopularSearch",
  query: "tshirt",
  facets: [],
});
</script>
```