Declarations with script tags in the [Vue.js] template
We previously used Thymeleaf in our project, but now when we move to Vue.js we run into some problems using the same declaration scripts. The scripts look like this. I only changed 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 <template>
, Webpack issues the following message:
Templates should only be responsible for mapping state to the user interface. Avoid placing labels with side effects in your templates such as, as they will not be parsed.
So, I searched all the time to find a similar case. There are several plugins that do this for Google Ads, but they won't work for us. Escaping script tags <\/script>
works in some way, but then the script is not appended to the DOM until it is loaded, and so it doesn't run.
Does anyone face similar issues? If so, what was your decision?
The 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>
source to share
You don't have to treat Vue templates as your final HTML, although their syntax is almost identical and also compatible with HTML syntax.
Templates are just a user interface for data (hence called a data-driven paradigm). They are parsed and converted into render functions that will ultimately create the final and reactive DOM tree. During this process, the tags <script>
really clouded over because this is not the place for any logic.
However, if you really need to embed a third party script in your component, there is a neat way to do it.
First, create a container for your script:
<template>
<div id="component-root">
<!-- (...) -->
<div v-el:script-holder></div>
</div>
</template>
Then dynamically create a tag <script>
and insert it directly into 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>
this.$els.scriptHolder
returns the actual DOM element, the caller appendChild()
forces the browser to insert the DOM node and run the script just like it would normally render HTML.
Instead, $els
you can also use $el
which will return the DOM element of the root components (in this example <div id="component-root">
) or even $root.$el
which will return the DOM element for the root Vue.
Please note that this.$els
- this is a Vue 1 feature that was replaced with $refs
in Vue 2: https://vuejs.org/v2/guide/migration.html#v-el-and-v-ref-replaced
source to share