v-quicksight-search

SearchOne.vue

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

const search = 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-search
      class="q-search"
      :url="quickSightEmbedUrl"
      :search="search"
      @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:

• Common ContentOptions for All Embedding Experiences
• Common FrameOptions for All Embedding Experiences
• Visual Embedding ContentOptions
• Visual Embedding FrameOptions

Additional and important properties

property	type	required	default	description
container	string	no	The default container created by the component itself.	The container where the iframe for embedding is created.
id	string	no	v-quicksight-search-${nanoid(6)}	The id for the created iframe container element (parent)
question	string	no	undefined	The 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.

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

message

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

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