---

title: SemanticQuery

---

# SemanticQuery

This component renders a semantic query. A semantic query is a recommended query
that is similar in its meaning to another one.
It contains the query and the distance, which indicates how similar the query is
compared to the searched query.

## Props

| Name                    | Description                                     | Type                       | Default       |
| ----------------------- | ----------------------------------------------- | -------------------------- | ------------- |
| <code>suggestion</code> | The @empathyco/x-types#SemanticQuery to render. | <code>SemanticQuery</code> | <code></code> |

## Slots

| Name                 | Description            | Bindings<br />(name - type - description)                                                                                                          |
| -------------------- | ---------------------- | -------------------------------------------------------------------------------------------------------------------------------------------------- |
| <code>default</code> | Semantic Query content | **v-bind** <code>{suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to}</code> - BaseSuggestion bindings |

## Events

A list of events that the component will emit:

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

## See it in action

Here you can see that the semantic query is rendered.

```vue live
<template>
  <SemanticQuery :suggestion="semanticQuery" />
</template>

<script setup>
import { SemanticQuery } from "@empathyco/x-components/semantic-queries";

const semanticQuery = {
  modelName: "SemanticQuery",
  query: "jacket",
  distance: 2,
};
</script>
```

### Play with the default slot

In this example, we add the distance of the semantic query next to the query.

```vue live
<template>
  <SemanticQuery :suggestion="semanticQuery" #default="{ suggestion, query }">
    <div>Original query: {{ query }}</div>
    <div>
      Suggested semantic query: {{ suggestion.query }} -
      {{ suggestion.distance }}
    </div>
  </SemanticQuery>
</template>

<script setup>
import { SemanticQuery } from "@empathyco/x-components/semantic-queries";

const semanticQuery = {
  modelName: "SemanticQuery",
  query: "jacket",
  distance: 2,
};
</script>
```