2 min read



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


Name Description Bindings
(name - type - description)
default Semantic Query content queries string[] - SemanticQueries mapped to strings
suggestions SemanticQuery[] - The SemanticQueries
findSemanticQuery (query: string) => SemanticQuery - Method to find a semantic query given a query
suggestion Semantic Query content v-bind {suggestion: object - Suggestion data, index: number - Suggestion index} - BaseSuggestion bindings
suggestion-content Semantic Query content v-bind {suggestion: object - Suggestion data, query: string - The query that the suggestion belongs to} - SemanticQuery bindings


This component doesn't emit events.

See it in action

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

  <SemanticQueries />
  import { SemanticQueries } from '@empathyco/x-components/semantic-queries';
  export default {
    name: 'SemanticQueriesDemo',
    components: {

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.

Play with the default slot

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

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.

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.

Play with the suggestion content slot

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