v-quicksight-dashboard

Example

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

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
• Dashboard ContentOptions
• Dashboard 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.
dashboard	string	no	-	The dashboard that should be displayed (it's watched and updated when the property changes)
id	string	no	v-quicksight-dashboard-${nanoid(6)}	The id for the created iframe container element (parent)
parameters	Parameter[]	no	[]	The parameters to be passed to the dashboard.
theme	string | ThemeConfiguration	no	-	The Theme ARN to use or an overriding ThemeConfiguration

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