Vue - how can i render a script inside a component template?

Question

I created a Vue component for a page in my Django, project. Now i'm trying to add to the component a tradingview widget, it looks like this:

<div class="col-md-6">
<div class="main-chart mb15">
  <!-- TradingView Widget BEGIN -->

  <div class="tradingview-widget-container">
    <div id="tradingview_e8053"></div>
    <script src="https://s3.tradingview.com/tv.js"></script>
    <script>
      new TradingView.widget(
        {
          "width": "100%",
          "height": 450,
          "symbol": "BINANCE:BTCUSDT",
          "interval": "D",
          "timezone": "Etc/UTC",
          "theme": "Dark",
          "style": "1",
          "locale": "en",
          "toolbar_bg": "#f1f3f6",
          "enable_publishing": false,
          "withdateranges": true,
          "hide_side_toolbar": false,
          "allow_symbol_change": true,
          "show_popup_button": true,
          "popup_width": "1000",
          "popup_height": "650",
          "container_id": "tradingview_e8053"
        }
      );
    </script>
    </div>
    <!-- TradingView Widget END -->
</div>

The problem is that if I load it inside the component

<template>
  <div id="myComponent">
    ...
  </div>
</template>

I get this error: Templates should only be responsible for mapping the state to the UI. Avoid placing tags with side-effects in your templates, such as <script>, as they will not be parsed.

Is there any way I can fix this?

probably there are some `style` or `script` tags inside your `template`. You need to remove them — tuhin47, Jan 02 '21 at 19:00
See related answer: https://stackoverflow.com/questions/45047126/how-to-add-external-js-scripts-to-vuejs-components — mulsun, Jan 02 '21 at 19:23
Does this answer your question? [How to add external JS scripts to VueJS Components](https://stackoverflow.com/questions/45047126/how-to-add-external-js-scripts-to-vuejs-components) — tao, Jan 02 '21 at 20:35

score 2 · Accepted Answer · answered Jan 02 '21 at 19:27

I think, you should move <script> part to yours vue script, for example under mounted lifecycle stage:

<template>
  <div id="myComponent">
    <div class="col-md-6">
      <div class="main-chart mb15">
        <div class="tradingview-widget-container">
          <div id="tradingview_e8053"></div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
export default {
  mounted() {
    new TradingView.widget(
    {
      "width": "100%",
      "height": 450,
      "symbol": "BINANCE:BTCUSDT",
      "interval": "D",
      "timezone": "Etc/UTC",
      "theme": "Dark",
      "style": "1",
      "locale": "en",
      "toolbar_bg": "#f1f3f6",
      "enable_publishing": false,
      "withdateranges": true,
      "hide_side_toolbar": false,
      "allow_symbol_change": true,
      "show_popup_button": true,
      "popup_width": "1000",
      "popup_height": "650",
      "container_id": "tradingview_e8053"
  }
}
</script>

And script load <script src="https://s3.tradingview.com/tv.js"></script> you should add to yours index.html file or somewhere else, outside vue templates.

score 1 · Answer 2 · answered Jan 02 '21 at 20:28

<!DOCTYPE html>
<html>
<head>
  <title>My first Vue app</title>
  <script src="https://unpkg.com/vue"></script>
  <script src="https://s3.tradingview.com/tv.js"></script>
</head>
<body>
 
    <div id="myComponent">
    </div>
  
  <script>

    new Vue({
      el: '#myComponent',
      data: {
  
      },
      mounted: function(){
         new TradingView.widget(
        {
          "width": "100%",
          "height": 450,
          "symbol": "BINANCE:BTCUSDT",
          "interval": "D",
          "timezone": "Etc/UTC",
          "theme": "Dark",
          "style": "1",
          "locale": "en",
          "toolbar_bg": "#f1f3f6",
          "enable_publishing": false,
          "withdateranges": true,
          "hide_side_toolbar": false,
          "allow_symbol_change": true,
          "show_popup_button": true,
          "popup_width": "1000",
          "popup_height": "650",
          "container_id": "tradingview_e8053"
        }
      );
      }
    })
  </script>

</body>
</html>

Vue - how can i render a script inside a component template?

2 Answers2