PlayCanvas Vuejs Compatibility

Help & Support
1

I am trying to integrate playcanvas project with Vuejs, has anyone successfully used Vue with Playcanvas. I have found this reference for the same but I not clear on the procedure that needs to be followed.

My query is how I can embed playcanvas to a Vue project. I have found this page giving the procedure to use unity with vue. It would be helpful if there is a similar explanation for playcanvas with vue, if not any working example with the procedure would be helpful

Unity 3d Component for VueJS

Thanks in advance

2

Here’s the original thread of that GitHub repo: PlayCanvas and Vue.js

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
4

This Repo is unfortunately a bit old and uses Vue2 you might want to use Vue3 and Composition API. But in general it is of course possible if you think about using the PlayCanvas engine… With what exactly do you have a problem? There might be some caveats with HMR (Hot Module Reload) I recommend using Vite and follow the basic install instructions on the Vue website. Then install playcanvas package und make a composable that utilize PlayCanvas. Do the things (event handling) the Vue way maybe utilize Vueuse composables for events and RAF. Do NOT use refs for the renderer, this could lead to performace issues!

If I find the time I will update the Repo to use Vue3 - already started, but I have no time atm :frowning:

6

Hi, I am having the below issue while trying to do self-hosting of playcanvas application in a vue project

image
image1575×555 42 KB

Can someone help me with this issue

7

It may be easier to share an example github project of this so that we can help further.

You may have to make some changes to the PlayCanvas boilerplate (__start__.js) that works specifically work for your project.

8

Hi @yaustar , I am sharing the example github project

Also, made some changes to index, now it points to a different issue

image
image1245×452 24.5 KB

I am trying to embed this project vue
https://playcanvas.com/project/657744/overview/skeeball

9

Thanks, I’ve forked the repo and made the fixes here: GitHub - yaustar/playcanvasForumVueTest

Please look through the commits and you can see the steps to get the following

image
image1732×830 43.2 KB

Where you can control the div that wraps the PlayCanvas app how you would like. (See this thread for more details: Embedding PlayCanvas into a webpage without iframe)

1 Like
10

Thanks a lot @yaustar. It really helped in understanding the issues

11

Hi, I am trying to host the project through Vue with an iframe. Can someone help me understand if there a way I can update an asset in the playcanvas project from the Vue code.
Also, can the game data from playcanvas be accessed in the project locally.
Any suggestions reg the same would be appreciated