Trying to incorporate JavaScript code into a Vue.js router app has posed some challenges. The task at hand involves fetching data from the CMS the app is hosted on. This requires utilizing a JavaScript library provided by the CMS, which is not specifically designed for Vue and does not export its class/functions in a modern JS format. As a workaround, the JS library is imported in the index.html file using a script tag, and this method functions correctly.
However, the next step involves utilizing the class from the CMS JavaScript library. Previously, when working with Vue solely for templating purposes, code was encapsulated within the window.onload event handler. To instantiate the CMS data access class, the necessity arises for creating an instance of said class. Unfortunately, this action triggers a build error when running the vue-cli build command. Due to the lack of clear error messages during the build process, troubleshooting becomes a process of trial and error. Even basic variable assignments like var a = 1 appear to be restricted, with only a console.log('something') statement being permissible (aside from defining the onload-event handler).
The aforementioned code has been included in a <script> tag within App.vue (generated by vue-cli create).
window.onload = function() {
try {
// Instantiate class instance for CMS data access
cmsDataAccessObj = new CMSAccessData();
waitForPlayerData = true;
}
catch (e) {
console.error(e);
}
}
UPDATE
Upon experimenting with various solutions provided in the responses, it has come to light that utilizing non-instance variables results in build errors.
An example of an error-prone statement:
waitForPlayerData = true;
An alternative that does not trigger errors:
this.waitForPlayerData = true;