---

title: SemanticQueries

---

# SemanticQueries

Retrieves a list of semantic queries from the state and exposes them in the slots.

## Slots

| Name                            | Description            | Bindings<br />(name - type - description)                                                                     |
| ------------------------------- | ---------------------- | ------------------------------------------------------------------------------------------------------------- |
| <code>suggestion</code>         | Semantic Query content | **v-bind** <code>{suggestion: object - Suggestion data, index: number - Suggestion index}</code> - undefined  |
| <code>suggestion-content</code> | Semantic Query content | **undefined** <code>mixed</code> - {{suggestion: object - Suggestion data, query: string - The query that the |

## Events

This component doesn't emit events.

## See it in action

By default, the `SemanticQueries` component will render a list of semantic queries.

```vue
<template>
  <SemanticQueries />
</template>

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

### Play with props

The component has the following props:

- `maxItemsToRender` to limit the number of semantic queries to render.
- `animation` to specify the animation to be used to animate the semantic queries.

```vue live
<template>
  <SemanticQueries :animation="animation" :maxItemsToRender="3" />
</template>

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

const animation = FadeAndSlide;
</script>
```

### Play with the default slot

The default slot is used to overwrite the whole content of the component.

```vue live
<template>
  <SemanticQueries #default="{ suggestions }">
    <section>
      <SlidingPanel>
        <div v-for="suggestion in suggestions" :key="suggestion.query">
          {{ suggestion.query }}
          {{ suggestion.distance }}
        </div>
      </SlidingPanel>
    </section>
  </SemanticQueries>
</template>

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

The default slot also exposes an array of semantic queries mapped to strings, and a method to find a
semantic query given a string query.

This is useful if you need an array of string queries, but also need to retrieve the original
semantic query to use it in another element.

```vue live
<template>
  <SemanticQueries #default="{ queries, findSemanticQuery }">
    <section>
      <QueryPreviewList :queries="queries" #slot="{ query, results }">
        <div>
          <SemanticQuery
            :suggestion="findSemanticQuery(query)"
            #default="{ suggestion }"
          >
            {{ suggestion.query }} ({{ suggestion.distance }})
          </SemanticQuery>
          <ul>
            <li v-for="result in results" :key="result.id">
              {{ result.name }}
            </li>
          </ul>
        </div>
      </QueryPreviewList>
    </section>
  </SemanticQueries>
</template>

<script setup>
import {
  SemanticQueries,
  SemanticQuery,
} from "@empathyco/x-components/semantic-queries";
import { QueryPreviewList } from "@empathyco/x-components/queries-preview";
</script>
```

### Play with the suggestion slot

The suggestion slot can be used to override each semantic query item.

In this example, the query will be rendered along with the distance.

```vue live
<template>
  <SemanticQueries #suggestion="{ suggestion: { query, distance } }">
    <span>
      ({{ distance }})
      {{ query }}
    </span>
  </SemanticQueries>
</template>

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

### Play with the suggestion-content slot

The suggestion-content slot can be used to override only the content, but keep using the
SemanticQuery component internally.

```vue live
<template>
  <SemanticQueries #suggestion-content="{ suggestion: { query, distance } }">
    <span>
      ({{ distance }})
      {{ query }}
    </span>
  </SemanticQueries>
</template>

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