Search code examples
javascriptvue.jsvuejs3vue-composition-api

Vue - script does not work in <script setup> element

I have working widget from Atlassian, when I use it in html file, behaviour is as expected:

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

but when I use it directly in vue component then I can't see widget:

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

I have tested different approaches but without result, no errors/warnings in console log.

Solution

  • Script imports are usually done in a static part of an application in a header of index.html.