title: Loading a third-party javascript library
body: <p>I developed a web radio player using Vue Cli. Now I have to add a new functionality using an external library (it's aimed to handle audio advertising) and <strong>this library must be served from the remote host</strong>. I can't just download the library and import it locally.</p>
  <p><strong>Setup</strong></p>
  <p>In my Vue App I have several components and in one of them I have an audio tag handling the radio playback. I need to detect the click on the play button, load the ad, play it and then go to the radio regular playback.</p>
  <p><strong>Approachs I tried</strong></p>
  <ol>
  <li>Loading the external library in the index.html file. It works but I can't interact with the player being loaded in Vue. For example, if I try to listen to the  play event in the index.html file (<code>audio.addEventListener(&quot;play&quot;, onPlay);</code>, I just receive &quot;audio not defined&quot; in the web console.</li>
  <li>Loading the external library in the mounted () section of my component:</li>
  </ol>
  <pre><code>const triton = document.createElement('script')
  triton.setAttribute('src', '//sdk.listenlive.co/web/2.9/td-sdk.min.js')
  document.head.appendChild(triton)
  this.initPlayerSDK()
  triton.onload = () =&gt; {
    let player = new TDSdk(this.tdPlayerConfig)
    console.log(player)
  }
  </code></pre>
  <p>The problem with this approach is that after <code>npm run serve</code>I receive the message <code>'TDSdk' is not defined  </code> which makes complete sense. I'm loading the external JS file but webpack isn't interpreting its content because that it's done in runtime. I have to add the external in my vue.config.js, but this doesn't work neither:</p>
  <p><strong>vue.config.js</strong></p>
  <pre><code>const path = require('path')
  
  module.exports = {
    publicPath: './',
    /*configureWebpack: {
      externals: {
        tdSdk: 'tdSdk'
      }
    },*/
    chainWebpack: config =&gt; {
      config.module
      .rule('images')
      .test(/\.(png|jpe?g|gif|webp)(\?.*)?$/)
      .use('url-loader')
      .loader('file-loader') // not url-loader but file-loader !
      .tap((options) =&gt; { // not .option() but .tap(options...)
        // modify the options...
        options.name = 'img/[name].[ext]'
        return options
      }),
      config.externals([
        {
          'tdSdk': 'TDSdk'
        },
      ])
    },
    css: {
      loaderOptions: {
        sass: {
          sassOptions: {
          includePaths: [path.resolve(__dirname, './node_modules/compass-mixins/lib')]
          }
        }
      }
    },
    externals: {
      tdSdk: 'TDSdk'
    }
  }
  </code></pre>
  <p><strong>myComponent.vue</strong></p>
  <pre><code>import tdSdk from 'tdSdk'
  </code></pre>