I have a functional widget from Atlassian that works as expected when used in an HTML file:
<html lang="en">
<head>
<script data-jsd-embedded data-key=<key> data-base-url=https://jsd-widget.atlassian.com src=https://jsd-widget.atlassian.com/assets/embed.js></script>
</head>
</html>
However, when I try to use it directly in a Vue component, the widget does not appear:
<template>
<p>test</p>
</template>
<script setup>
import { onMounted } from 'vue';
onMounted(() => {
const script = document.createElement('script');
script.setAttribute('data-jsd-embedded', '');
script.setAttribute('data-key', '<key>');
script.setAttribute('data-base-url', 'https://jsd-widget.atlassian.com');
script.setAttribute('src', 'https://jsd-widget.atlassian.com/assets/embed.js');
document.head.appendChild(script);
});
</script>
Despite trying various methods, I have been unable to get the widget to display. There are no errors or warnings in the console log.