Is Vue 3 support planned?

[RaphaelMaschinsen]

So far I wasn't successful using vue-unity-webgl with Vue 3. I'm using vue@3.0.2 and I get following warnings in chrome (origin is runtime-core.esm-bundler.js?5c40:38):

[Vue warn]: Property "$createElement" was accessed during render but is not defined on instance. at <UnityWebGL src="unity/Build/Web.json" width="1000" height="600" ... > at <App>

[Vue warn]: Property "_self" was accessed during render but is not defined on instance. at <UnityWebGL src="unity/Build/Web.json" width="1000" height="600" ... > at <App>

[Vue warn]: Unhandled error during execution of render function at <UnityWebGL src="unity/Build/Web.json" width="1000" height="600" ... > at <App>

followed by this error (origin is runtime-core.esm-bundler.js?5c40:217):

Chrome [Version 86.0.4240.198 (Official Build) (64-bit)] / Windows 10:
Uncaught TypeError: Cannot read property '_c' of undefined

Firefox [83.0 (64-bit)] / Linux:
Uncaught TypeError: can't access property "_c", _vm._self is undefined

I tested this on two different machines and on both machines the project is running fine with Vue 2.
Is there an easy fix or any Ideas on how to get it to work? Are there plans for Vue 3 support?

[88er]

same errors with me，i think it should be update to vue3.

[wcai49]

same here, is there any solution for vue3?

[dtanquary]

Here is my solution for loading Unity webGL games in vue3 as I wasn't able to get this module to work either. My solution was tested on Unity 2020.3.19f1 but probably works on all 2020.x versions and above.

First, put a copy of your webGL build folder in your vue public directory:

Then copy and paste the code below into a new component and update const file = 'BUILD_FILE'; with your game name. There are further improvements that can be made here but this should be enough to get you started:

<template>
  <canvas
    id="unity-canvas"
    width=900
    height=600
    style="width: 900px; height: 600px; background: #808080">
  </canvas>
</template>

<script setup>
import { onMounted } from 'vue';

const sendMessage = (object, method, param) => {
  window.gameInstance.SendMessage(object, method, param);
};

onMounted(() => {
  const file = 'BUILD_FILE';
  const script = document.createElement('script');
  script.onload = () => {
    createUnityInstance(document.querySelector('#unity-canvas'), {
      dataUrl: `Build/${file}.data`,
      frameworkUrl: `Build/${file}.framework.js`,
      codeUrl: `Build/${file}.wasm`,
      streamingAssetsUrl: 'StreamingAssets',
      companyName: 'YOUR_COMPANY_NAME',
      productName: 'YOUR_PRODUCT_NAME',
      productVersion: 'YOUR_VERSION_NUMBER',
      // matchWebGLToCanvasSize: false,
      // Uncomment above to separately control WebGL canvas render size and DOM element size.
      // devicePixelRatio: 1,
      // Uncomment above to override low DPI rendering on high DPI displays.
    }).then((unityInstance) => {
      // setting this allows the usage of "window.gameInstance" in jslib plugins inside Unity
      // it also sets up a simple shortcut we can use to provide a path into Unity from vue
      window.gameInstance = unityInstance;
    });
  };
  script.async = true;
  script.src = `Build/${file}.loader.js`;
  document.head.appendChild(script);
});

</script>

Some notes:

• I used vue@3.2.20 and the composition api but this can just as easily be done with the options api if that is what you prefer
• If you run into any issues try copying and pasting the values directly from your built webgl game's index.html into the script.onload section.
• createUnityInstance is a promise now and so if you want to be able to call SendMessage you need to .then or await the call and then map the unityInstance back to some variable. I use window.gameInstance because window is accessible in jslib plugins inside Unity.

[scalemaildev]

For anyone else reading this. For Nuxt3 rc4 I had to specify the .br in my build files to get it to load.

EDIT: I also moved the unity instance from the window to it's own constant and it's working fine. Personal preference.

[akbarism]

Here is my solution for loading Unity webGL games in vue3 as I wasn't able to get this module to work either. My solution was tested on Unity 2020.3.19f1 but probably works on all 2020.x versions and above.

First, put a copy of your webGL build folder in your vue public directory:

Then copy and paste the code below into a new component and update const file = 'BUILD_FILE'; with your game name. There are further improvements that can be made here but this should be enough to get you started:

<template>
  <canvas
    id="unity-canvas"
    width=900
    height=600
    style="width: 900px; height: 600px; background: #808080">
  </canvas>
</template>

<script setup>
import { onMounted } from 'vue';

const sendMessage = (object, method, param) => {
  window.gameInstance.SendMessage(object, method, param);
};

onMounted(() => {
  const file = 'BUILD_FILE';
  const script = document.createElement('script');
  script.onload = () => {
    createUnityInstance(document.querySelector('#unity-canvas'), {
      dataUrl: `Build/${file}.data`,
      frameworkUrl: `Build/${file}.framework.js`,
      codeUrl: `Build/${file}.wasm`,
      streamingAssetsUrl: 'StreamingAssets',
      companyName: 'YOUR_COMPANY_NAME',
      productName: 'YOUR_PRODUCT_NAME',
      productVersion: 'YOUR_VERSION_NUMBER',
      // matchWebGLToCanvasSize: false,
      // Uncomment above to separately control WebGL canvas render size and DOM element size.
      // devicePixelRatio: 1,
      // Uncomment above to override low DPI rendering on high DPI displays.
    }).then((unityInstance) => {
      // setting this allows the usage of "window.gameInstance" in jslib plugins inside Unity
      // it also sets up a simple shortcut we can use to provide a path into Unity from vue
      window.gameInstance = unityInstance;
    });
  };
  script.async = true;
  script.src = `Build/${file}.loader.js`;
  document.head.appendChild(script);
});

</script>

Some notes:

• I used vue@3.2.20 and the composition api but this can just as easily be done with the options api if that is what you prefer
• If you run into any issues try copying and pasting the values directly from your built webgl game's index.html into the script.onload section.
• createUnityInstance is a promise now and so if you want to be able to call SendMessage you need to .then or await the call and then map the unityInstance back to some variable. I use window.gameInstance because window is accessible in jslib plugins inside Unity.

have you tried it using vite? I have a problem when importing the wasm file

[sunjiesama]

Here is my solution for loading Unity webGL games in vue3 as I wasn't able to get this module to work either. My solution was tested on Unity 2020.3.19f1 but probably works on all 2020.x versions and above.

First, put a copy of your webGL build folder in your vue public directory:

Then copy and paste the code below into a new component and update const file = 'BUILD_FILE'; with your game name. There are further improvements that can be made here but this should be enough to get you started:

<template>
  <canvas
    id="unity-canvas"
    width=900
    height=600
    style="width: 900px; height: 600px; background: #808080">
  </canvas>
</template>

<script setup>
import { onMounted } from 'vue';

const sendMessage = (object, method, param) => {
  window.gameInstance.SendMessage(object, method, param);
};

onMounted(() => {
  const file = 'BUILD_FILE';
  const script = document.createElement('script');
  script.onload = () => {
    createUnityInstance(document.querySelector('#unity-canvas'), {
      dataUrl: `Build/${file}.data`,
      frameworkUrl: `Build/${file}.framework.js`,
      codeUrl: `Build/${file}.wasm`,
      streamingAssetsUrl: 'StreamingAssets',
      companyName: 'YOUR_COMPANY_NAME',
      productName: 'YOUR_PRODUCT_NAME',
      productVersion: 'YOUR_VERSION_NUMBER',
      // matchWebGLToCanvasSize: false,
      // Uncomment above to separately control WebGL canvas render size and DOM element size.
      // devicePixelRatio: 1,
      // Uncomment above to override low DPI rendering on high DPI displays.
    }).then((unityInstance) => {
      // setting this allows the usage of "window.gameInstance" in jslib plugins inside Unity
      // it also sets up a simple shortcut we can use to provide a path into Unity from vue
      window.gameInstance = unityInstance;
    });
  };
  script.async = true;
  script.src = `Build/${file}.loader.js`;
  document.head.appendChild(script);
});

</script>

Some notes:

• I used vue@3.2.20 and the composition api but this can just as easily be done with the options api if that is what you prefer
• If you run into any issues try copying and pasting the values directly from your built webgl game's index.html into the script.onload section.
• createUnityInstance is a promise now and so if you want to be able to call SendMessage you need to .then or await the call and then map the unityInstance back to some variable. I use window.gameInstance because window is accessible in jslib plugins inside Unity.

Hi, thank you very much for sharing your code
I have a question that I would like to ask. The files exported by my unity have no .data, no .framework.js, and no wasm. The directory is as follows. How should I solve it?

[dtanquary]

@akbarism

have you tried it using vite? I have a problem when importing the wasm file

Not yet but it is on my product roadmap to move from vue-cli-service to vite as that's the new default. Can you post the exact error you get? I can maybe take a look and see if there is any suggestion for vite config that can help.

[dtanquary]

@sunjiesama

The files exported by my unity have no .data, no .framework.js, and no wasm.

Can you try doing a build where in your publishing settings you set "Compression Format" to disabled and see if that gets you the correct files?

[akbarism]

@akbarism

have you tried it using vite? I have a problem when importing the wasm file

Not yet but it is on my product roadmap to move from vue-cli-service to vite as that's the new default. Can you post the exact error you get? I can maybe take a look and see if there is any suggestion for vite config that can help.

i solved by moving to unity-webgl