Displaying advertisements on a Vue.js element

Question

Displaying advertisements on a Vue.js element

It's a known issue that if we include the <script> tag in the "el" of Vue.js, an error will be displayed. This prevents me from being able to include any ads in the Vue "el" section.

For example:

new Vue({
  el: '#app',
  data: {
    message: 'Hello Vue.js!'
  }
})

<script src="https://unpkg.com/<a href="/cdn-cgi/l/email-protection" class="__cf_email__" data-cfemail="3a4c4f5f7a08140e1408">[email protected]</a>/dist/vue.js"></script>
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>

<div id="app">
{{ message }}
<script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>

It is recommended to keep templates responsible for mapping state to the UI and avoid including tags with side-effects like <script>. These tags will not be parsed.

So, is it impossible to include ads in Vue "el"?

javascript vue.js

Answer 1

Answer №1

I recently finished developing a Vue component that has the ability to easily load external scripts.

This component has been successfully utilized to load advertisements from a variety of companies such as Chitika, Medianet, and Propeller.

If you're interested, you can find the repository for this Vue component here:

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

Below is a guide on how to implement and use this Vue script component:

<template>
    <div>
        <VueScriptComponent script='<script type="text/javascript"> alert("Peekaboo!"); </script>'/>
    <div>
</template>

<script>
import VueScriptComponent from 'vue-script-component'

export default {
  ...
  components: {
    ...
    VueScriptComponent
  }
  ...
}
</script>

Answer 2

I recently finished developing a Vue component that has the ability to easily load external scripts.

This component has been successfully utilized to load advertisements from a variety of companies such as Chitika, Medianet, and Propeller.

If you're interested, you can find the repository for this Vue component here:

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

Below is a guide on how to implement and use this Vue script component:

<template>
    <div>
        <VueScriptComponent script='<script type="text/javascript"> alert("Peekaboo!"); </script>'/>
    <div>
</template>

<script>
import VueScriptComponent from 'vue-script-component'

export default {
  ...
  components: {
    ...
    VueScriptComponent
  }
  ...
}
</script>

Answer 3

Answer №2

It is not possible because the el option is specifically used to designate the DOM element to be compiled with the Vue.js component. This is why the error message is stating

Templates should only be responsible for mapping the state to the UI

. The role of the Vue.js compiler is to map data, computed methods, and similar elements into your mounted component.

The only solution is to avoid placing the <script> tag inside your desired element.

<div>
  <div id="app">
    {{ message }}
  </div>
  <script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>

Answer 4

It is not possible because the el option is specifically used to designate the DOM element to be compiled with the Vue.js component. This is why the error message is stating

Templates should only be responsible for mapping the state to the UI

. The role of the Vue.js compiler is to map data, computed methods, and similar elements into your mounted component.

The only solution is to avoid placing the <script> tag inside your desired element.

<div>
  <div id="app">
    {{ message }}
  </div>
  <script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>

Answer 5

Answer №3

It may seem difficult, but I have a potential solution that could assist you in managing your html elements by utilizing the split function.

One approach is to utilize Vue.js for compiling data, such as that retrieved from a database:

<div id="app">
  {{ data }}
</div>

Next, you can create a specific html element to display your advertisements:

<div id="ads-example">
  <script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>

Lastly, add another html element for another Vue element following the ads element. Hopefully, this alternative solution proves helpful to you :)

Answer 6

It may seem difficult, but I have a potential solution that could assist you in managing your html elements by utilizing the split function.

One approach is to utilize Vue.js for compiling data, such as that retrieved from a database:

<div id="app">
  {{ data }}
</div>

Next, you can create a specific html element to display your advertisements:

<div id="ads-example">
  <script data-cfasync='false' type='text/javascript' src='//p31898.clksite.com/adServe/banners?tid=31898_118905_0'></script>
</div>

Lastly, add another html element for another Vue element following the ads element. Hopefully, this alternative solution proves helpful to you :)

Displaying advertisements on a Vue.js element

Answer №1

Answer №2

Answer №3

Similar questions

Utilizing Redux with React to fetch and handle JSON data from given API endpoint

AngularJS extension known as 'ngclipboard'

The compiler throwing an error claiming that the indexOf method is not a valid

My goal is to utilize React JS to generate a table by sending the values through props using an array of objects

Clicking on Rows in DataTables: Enhancing

Display the intersection of two objects in varying colors using three.js

Receiving HTTP POST data using Classic ASP script

Error message in Leaflet JS: Unable to access property 'addLayer' because it is undefined when trying to display drawnItems on the Map

Array Filtering with Redux

What is the best way to download the entire page source, rather than just a portion of it

Using Google Chart API to create stacked bar charts with annotations using symbols

Creating a Comprehensive Page Design with Bootstrap and the Latest Version of Vue

Execute functions during jquery's .animate() operation

How can we effectively implement an auto login feature using JWT?

Creating Unique Identifiers in ExpressJS

Serving files from a Node.js server and allowing users to download them in their browser

Encountering a TypeError while attempting to sort in ReactJS: "0 is read only."

Lazy Loading fails to deliver for Ajax Requests

How can one retrieve the x and y coordinates from the client's browser and pass them to the server in a Bokeh server setup?

Executing Jquery code inside a PHP function