javascript - Ads with script tags in template [Vue.js]

Question

In our project we've previously been using Thymeleaf, but now that we're moving over to Vue.js, we're experiencing some issues using the same ad scripts. The scripts look like this. I've only altered the URLs.

<script data-adfscript="sub.adcompany.net/asdf/?id=256746"></script>
<script src="//sub.adcompany.net/url/to/advertisement/script.js"  async="async" defer="defer"></script>

If we put these tags in the <template>, Webpack gives the following message:

Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as , as they will not be parsed.

So I've then been Googling all over to find a similar case. There are some plugins that do this for Google Ads, but they won't work for us. Escaping the script tags </script> works in a way, but then the script isn't added to the DOM until after loaded, and so it doesn't run.

Has anyone run into similar issues? If so, what was your solution?

Vue file looks something like this:

<template>
  <aside class="sidebar-ad ui-wide">
    <script data-adfscript="sub.adcompany.net/asdf/?id=256746"></script>
    <script src="//sub.adcompany.net/url/to/advertisement/script.js"  async="async" defer="defer"></script>
  </aside>
</template>

<script>
    export default {
        data () {
            return {}
        }
    }
</script>

Answer 1

There is workaroud. Works with style tag too.

<component is="script" src="https://www.example.com/example.js" async></component>