So, imagine Vue index.html that also loads some custom script:
<!DOCTYPE html>
<html lang="en">
<head>
...
...
<script type="text/javascript">
languagePluginLoader.then(function () {
pyodide.loadPackage("someName").then(() => {
// Send message to Vue that everything is fine
}).catch((err) => {
// Send message to Vue that it failed
})
})
</script>
...
...
</head>
<body>
<div id="app"></div>
<!-- built files will be auto injected -->
</body>
</html>
Is there a way to communicate with running Vue instance or/and Vuex from the index.html file? For example, I want to show "Loading..." until the script is fully loaded, etc.
One way will be to send the message to the service worker and then from the service worker to Vue, but it feels unpractical.
Another way is to set windows.script_status = true after the initialization, but window object is not reactive, so Vue will check it once, get undefined and forget about it.
UPD: Third way will be to inject scripts from the Vue side and put some function into script.onload to get when it's ready, but not sure how stable the solution is.
So, any advice will do :)
The solution was the third one - inject script manually through mounted and put all the logic into script.onload part. Google Maps example:
mounted: function () {
if (window.google && window.google.maps) {
this.create_map();
return;
}
var self = this;
var script = document.createElement("script");
script.onload = function () {
if (!window.google && !window.google.maps)
return void (console.error("no google maps script included"));
self.create_map();
};
script.async = true;
script.defer = true;
script.src = "https://maps.googleapis.com/maps/api/js?key=googleapikeyxxxx&callback=initMap";
document.getElementsByTagName("head")[0].appendChild(script);
}
Picked the logic from another SO question's answer: https://stackoverflow.com/a/45605316/1598470.