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 a workaround. Works with style tag too.

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

Answer 2

I've run into this problem today as well, it seems like there are not many solutions to date. I found a way to work around this, not sure how well it works but this the way I did it.

Run the in normal html then go to Dev tools and copy the iframe code made by the script and then paste it into the code as iframe instead of the .