v-quicksight

A component that's responsible to setup the embedding context. The embedding context creates an additional zero-pixel iframe and appends it into the body element on the page to centralize communication between the Quicksight SDK and the embedded QuickSight content.

DashboardOne.vue

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

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-dashboard class="report-dashboard" :url="quickSightEmbedUrl" @change="log" />
  </v-quicksight>
</template>

Props

property	type	required	default	description
className	string	no	v-quicksight	A CSS class name, the wrapper component for v-quicksight will have.

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;
}

Provides

symbol	type	description
EmbeddingContextInjectionKey	Ref<EmbeddingContext>	Provides the general embedding context to used in other v-quicksight child components