title: Use custom JavaScript code in a Vue.js app
body: <p>I'm trying to insert JavaScript code in a Vue.js router app. I need to load data from the CMS the app is served from. In order to get the data from the CMS I have to use a JavaScript library from the CMS which is not made for Vue and is not exporting it's class/functions like modern JS. So I import the JS library from in the index.html by a script tag. This works as intended.</p>
  <p>But now I have to use the class from this CMS JavaScript library.
  Before writing this as a Vue-Router app I just have used Vue for templating purposes.
  So I had some code packed in the window.onload event handler.
  I have to create an instance for the CMS data access class.
  But this leads to a build error (using vue-cli build). Since there
  are no understandable error messages from the build process
  I have to use trial and error. Even simple variable assignments like <code>var a = 1</code> seem not to be allowed.
  A console.log('something') works. But nothing else seemes to be allowed (except defining the onload-event handler)</p>
  <p>I have added this code in a <code>&lt;script&gt;</code> Tag inside App.vue (which was created by vue-cli create)</p>
  <pre><code>window.onload = function() {
      
      try {
          // Instantiate class obj for CMS data access
          cmsDataAccessObj = new CMSAccessData();
          waitForPlayerData = true;
      }
      catch (e) {
          console.error(e);
      }
  }
  </code></pre>
  <h2>UPDATE</h2>
  <p>After testing the different solutions from the answers I got aware that using non-instance variables seems to cause the build errors.</p>
  <p>This gives an error:</p>
  <pre><code>        waitForPlayerData = true;
  </code></pre>
  <p>This works:</p>
  <pre><code>        this.waitForPlayerData = true;
  </code></pre>