---

title: NextQuery

---

# NextQuery

Renders a next query item which receives the suggestion that will be rendered as a prop. It
exposes a default slot to change the next query 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>NextQueryModel</code> | <code></code>      |
| <code>highlightCurated</code> | Indicates if the curated next query should be highlighted. | <code>boolean</code>        | <code>false</code> |

## Slots

| Name                 | Description        | Bindings<br />(name - type - description)                                                                                                                                                                                                                                                                                                          |
| -------------------- | ------------------ | -------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------------- | -------------------------------------- |
| <code>default</code> | Next Query content | **shouldHighlightCurated** <code>boolean</code> - True if the curated NQ should be highlighted<br />**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 |

## Dynamic Classes

`NextQuery` uses the following dynamic CSS classes so you can style it when is:

- Curated: `x-next-query--is-curated`.

## Events

A list of events that the component will emit:

- [`UserSelectedANextQuery`](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 next query 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 next query. It also has an optional
prop, `highlightCurated`, to indicate if the curated Next Queries should be differentiated with a
CSS class.

### Basic usage

Using default slot:

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

<script setup>
import { NextQuery } from "@empathyco/x-components/next-queries";
import { ref } from "vue";

const suggestion = ref({
  modelName: "NextQuery",
  query: "tshirt",
  facets: [],
});
</script>
```

### Overriding default slot

The default slot allows you to replace the content of the suggestion button.

```vue live
<template>
  <NextQuery :suggestion="suggestion" #default="{ suggestion }">
    <TrendingIcon />
    <span class="x-next-query__query" :aria-label="suggestion.query">{{
      suggestion.query
    }}</span>
  </NextQuery>
</template>

<script setup>
import { NextQuery } from "@empathyco/x-components/next-queries";
import { TrendingIcon } from "@empathyco/x-components";
import { ref } from "vue";

const suggestion = ref({
  modelName: "NextQuery",
  query: "tshirt",
  facets: [],
});
</script>
```