CODEWITHSUNDEEP
javascripthtmlwebpackvue.js
Watercolours
Watercolours

Reputation: 414

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>

Upvotes: 19

Views: 39362

Answers (6)

GSA
GSA

Reputation: 15

just place your in vue template scripts after your app, in exemple at the end of the body

(function($) {
            $('#your-app').find('script').appendTo('body')
            <script> your vue script (create app)</script>
    })(jQuery);

Upvotes: 0

Krzysiek
Krzysiek

Reputation: 8405

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://v2.vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced

Upvotes: 9

DMantas
DMantas

Reputation: 153

I found a way to work around this, not sure how well it works but this the way I did it.

Run the <script> 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 <script>.

Upvotes: 1

Eugen Govorun
Eugen Govorun

Reputation: 3326

There is a workaround. Works with style tag too.

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

Upvotes: 38

Dynomike
Dynomike

Reputation: 161

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

Upvotes: 3

Miguel Angel Arenas Correa
Miguel Angel Arenas Correa

Reputation: 61

You can try with this package

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

Upvotes: 6

Related Questions