PlayCanvas Vuejs Compatibility

Help & Support
3

Hi @Sripal,

We are using a number of Vue.js components in our Uranus Tools SDK (https://solargames.io/tools). The main way we load them is by building them as a single module (vue.js included) using webpack.

Afterwards in PlayCanvas we load them as a module like this, hope that helps.

Class name is the object name that will appear in the global context.

Module asset is the Vue .js script uploaded to the editor (we uncheck preload on the asset).

    // --- check if library is already loaded
    if (window[this.className]) return;

    let path = this.moduleAsset.getFileUrl();

    // --- check if it's an absolute path, if not update
    if (path.indexOf('http') !== 0 && window.location.origin.indexOf('launch.playcanvas.com') === -1) {
        path = window.location.origin + window.location.pathname + path;
    }

    import(path).then((module) => {
        window[this.className] = module[this.className];
    });
1 Like