Ads with script tags in template [Vue.js]

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>

Answers:

Answer

You should not treat Vue templates as a your final HTML, although their syntax is nearly identical and is also HTML-syntax compliant.

Templates are just a UI scaffolds for the data (that is why it is called a data-driven paradigm). They get parsed and transformed into render functions that in the end will produce the final and reactive DOM tree. During this process the <script> tags are indeed ommited cause it is not a place for any logic to happen.

However if you really need to embed any 3rd party script within your component there is a neat way to do this.

First, create container for the script:

<template>
    <div id="component-root">
        <!-- (...) -->
        <div v-el:script-holder></div>
    </div>
</template>

Then dynamicly create <script> tag and insert it directly to the DOM tree (using pure Vanilla JS):

<script>
    export default {
        data () {
            return {};
        },
        ready() {
             let scriptEl = document.createElement('script');
             scriptEl.setAttribute('src', 'https://cdn.com/somescript.js');
             scriptEl.setAttribute('data-some-param', 'paramvalue');
             this.$els.scriptHolder.appendChild(scriptEl);
        },
    }
</script>

The this.$els.scriptHolder returns actual DOM element, calling the appendChild() forces the browser to insert DOM node and run the script just like during ordinary HTML code rendering.

Instead of $els you could also use $el which would return the components root DOM element (in this example the <div id="component-root">) or even the $root.$el which would return the Vue App root DOM element.

Note that this.$els is a Vue 1 feature, which has been replaced with $refs in Vue 2: https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

Answer

You can try with this package

https://www.npmjs.com/package/vue-script2

Answer

I made a vue component to handle script loading within the template tags.

Personally, I use it to load ads in my vuejs apps.

here:

https://github.com/TheDynomike/vue-script-component

Answer

There is workaroud. Works with style tag too.

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

Tags

Recent Questions

Top Questions

Home Tags Terms of Service Privacy Policy DMCA Contact Us

©2020 All rights reserved.