Unity 2020 WebGL in Vue.js

Hello,

i’m currently struggling to make a unity webgl working in a Vue.js project.

apparently a plugin exists for unity 2019 (GitHub - votetake/vue-unity-webgl: Unity 3d Component for VueJS) but with the 2020 change, it’s not working, and has not been updated.

to be honest, unity is missing some more detailed tutorial to deploy webgl.
first i don’t know where to put the build folder, should it be under “/static”, “/public” (i’ve gone with public currently)
then i had difficulty to make the build.loader.js recognized as javascript
then it was not loading the function inside it, so i had to add ‘export { createUnityInstance }’ as a second line and load the file as module

now i’m stuck on this error when the function is called:
"ReferenceError: gl is not defined"
and have no idea where to go from there

Did anyone managed to make unity webgl working with Vue.js ?
any sample or help appreciated !

1 Like

hello,
Did you solve that problem??

Bump!

Try this other project: GitHub - Meqn/UnityWebGL.js: An easy solution for embedding Unity WebGL builds in webApp or Vue.js project, with two-way communication between your webApp and Unity. 🏣 在webApp 或 Vue.js 项目中嵌入 Unity WebGL,并支持通过API在 webApp 和 Unity 之间进行双向通信。

I’ve started to test it out and seems to work fine with Unity 2020.3.24f1 WebGL output.

1 Like

It does not work with version 2021, and how can i send message from webgl to vuejs method? In the github had mentioned

UnityLib.showDialog(data)

but it looks like not working. What is UnityLib exactly?

That is for the opposite: sending from unity to web. Check the Communication section in the github repository readme. Right below the example you posted there is a section about ‘JS call Unity public methods.’

Frankly, I would recommend doing your own implementation of Vue.Js on top of Unity, it’s a 5 minutes matter if you just look at how the default HTML template of Unity is done and port it to Vue.Js, and at least you’ll get some control over what you are doing instead of using a library that might not work with your version of Unity/Vue.Js.

The only sensitive part is to get the Unity canvas, you can use refs or getElementById, and once you’ve done this there is nothing more to do, just pass it to createUnityInstance.

You also have to put your .js/.wasm files in the public folder for everything to work well, don’t try to parse the javascript on the VueJS side with webpack, because webpack will break Unity’s files, especially if you are using typescript.

I’ve been using VueJs + Typescript for a while and it works like a charm.

1 Like