Vue js is deleting a script tag when compiled

Question

I'm new with Vue.js and I'm having an issue that I can not solve.. I'm using Vue cli 3 and in my code I'm adding a custom tag (not a component) on my template with a script tag inside.

<ra type="outstream" pid="888666574" ra_init="open" ra_end="open" skin="dark" hasConsent="1">
    <script type="text/javascript" src="https://s.test.com/script.js"></script>
</ra>

This script goes to search the custom tag ra, so needs to be inside of the tag. The problem is that when I inspect the site with devTools, the ra tag is empty. I mean, the script it's not there. I think that maybe Vue is removing the script to prevent XSS or something like that, but I need to run this script.

Someone knows what's happening?

Thanks! :)

Answer 1

mounted() {
  let script = document.createElement('script');
  script.setAttribute('src', 'https://s.test.com/script.js');

  let wrapper = document.createElement('ra');
  wrapper.appendChild(script);
  wrapper.setAttribute('pid','888666574');
  wrapper.setAttribute('ra_init','open');
  wrapper.setAttribute('ra_end','open');
  wrapper.setAttribute('skin','dark');
  wrapper.setAttribute('hasConsent','1');
  document.body.appendChild(wrapper);
}  

Try this i hope it helps