Skip to content

v-quicksight-generative-qna

vue
<script setup lang="ts">
import { ref } from 'vue'

const question = ref('How many apples were sold?')

const quickSightEmbedUrl = ref(
  'https://eu-central-1.quicksight.aws.amazon.com/embed/12345/dashboards/67890?code=...'
)

function log($event: any) {
  console.log('change', $event)
}
</script>

<template>
  <v-quicksight>
    <v-quicksight-generative-qna
      class="report-dashboard"
      :url="quickSightEmbedUrl"
      :question="question"
      @change="log" />
  </v-quicksight>
</template>

Props

All of the following properties are passed with their default values from the amazon-quicksight-embedding-sdk one by one:

Additional and important properties

propertytyperequireddefaultdescription
containerstringnoThe default container created by the component itself.The container where the iframe for embedding is created.
idstringnov-quicksight-visual-${nanoid(6)}The id for the created iframe container element (parent)
questionstringnoundefinedThe question to ask or a nullish value if the search should be closed. This property is watched for changes.

Events

change

Emits a generic event containing the changes as well as optionally the meta data of the frame.

ts
type VQuicksightChange = {
  changeEvent: SimpleChangeEvent;
  metadata?: ExperienceFrameMetadata;
}

message

Emits a generic event containing the message as well as optionally the meta data of the frame.

ts
type VQuicksightMessage = {
  messageEvent: SimpleMessageEvent;
  experienceMetadata?: ExperienceFrameMetadata;
}