[Vuejs]-Loading a third-party javascript library

by

0👍

My solution was to load the library in the public/index.html file and then wait for the DOM being loaded so I could add the event listener to the audio element already loaded:

document.addEventListener('DOMContentLoaded', function() {
var playControl = document.getElementById('playIcon');
playControl.addEventListener("click", onPlay);
}

Then, in the Vuex store I needed to access the variables defined in the javascript located in the index.html. To do that, I set the window.adState (the var I’m using) as a global var in my store file:

Vuex.Store.prototype.$adState = window.adState

Finally, in my actions/mutations I used this.$adState to check its content:

playPause ({ commit, dispatch }) {
console.log('AdState', this.$adState)
(...)
}

Answer added on behalf of OP.

-1👍

The import cannot be resolved at the time when the script is evaluated because TDSdk global is not available. A script that is dynamically added to head is loaded asynchronously so there will be race condition any way.

<script> needs to be added dynamically if there’s dynamic behaviour involved or like a condition or a developer doesn’t have control over page layout. For static script, Vue CLI project’s public index.html can be modified:

  <body>
    <div id="app"></div>
    <script src="//sdk.listenlive.co/web/2.9/td-sdk.min.js"></script>
    <!-- built files will be auto injected -->
  </body>

Application bundle is evaluated after the script and the global is expected to be available there.

Externals are commonly used for packages that were swapped to ones that were externally loaded, usually from CDN. Since tdSdk is not a real package and has no prospects to be swapped for one, it doesn’t serve a good purpose to map it to a global and import it. It can be just used as TDSdk global in the application.

Leave a comment