Embed MQL5 Calendar Widget to website not working with Vuejs 2

 

Hello, 

I'm trying to embed MQL5 Widget to my website. I read the instruction and wrap the code to run on my front-end library (Vue 2)

The instruction link: https://www.mql5.com/en/economic-calendar/widgets

However, when the component is mounted or when I change route, the widget doesn't load. Only when I reload the whole page I can see the widget. I need the widget to load every time the component is mounted without having to reload page. Please help me with this.

Here is the code in main.js :

import LoadScript from "vue-plugin-load-script";
Vue.use(LoadScript);

Here is the code in component: 

<template>
  <b-row class="justify-content-center mx-5 calendar__content">
    <b-col lg="12" class="px-0">
      <div id="economicCalendarWidget"></div>
    </b-col>
  </b-row>
</template>
<script>
export default {
  mounted() {
    this.$loadScript(
      ).then(() => {
        new economicCalendar({
          width: "100%",
          height: "700px",
          mode: 2,
        })
    });
  },
}

</script>

Thank you

Economic calendar widget
Economic calendar widget
  • www.mql5.com
Set (customize) and place the economic calendar widget on your website with automatic updates in real time.
 

The Widget is designed to be placed in a normal webpage, not to be dynamically rendered via JavaScript after the fact.

So your query has nothing to do with this forum. I suggest using a forum dedicated to Vue instead.

Reason: