Is Vue 3 support planned?

[votetake]

Is Vue 3 support planned?

[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 [email protected] 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.

[88er]

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

[wcai49]

same here, is there any solution for vue3?

[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 [email protected] 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 [email protected] 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