Using Godot with Vue/Nuxt

Godot Version

4.3 web export.

Question

I would like to host a godot html5 export on a website that uses vue / nuxt as a front-end. eventually id like interact with it from the dom and vice-versa, but now i just have trouble getting it to start.

ive tried to adapt the boilerplate code to run on vue, however i am faced with an error in the console:
CompileError: WebAssembly.instantiateStreaming(): expected magic word 00 61 73 6d, found 3c 21 44 4f @+0

for clarity, my code is as follows: (this is in vue3)

<script setup lang="ts">
import { onMounted } from "vue";
import { Engine } from "../godotWeb/WebBackgrounds";
onMounted(async () => {
  console.log("moutned");
  const GODOT_CONFIG = {
    args: [],
    canvasResizePolicy: 2,
    ensureCrossOriginIsolationHeaders: true,
    executable: "WebBackgrounds",
    experimentalVK: false,
    fileSizes: {
      "WebBackgrounds.pck": 1060672,
      "WebBackgrounds.wasm": 43016933,
    },
    focusCanvas: true,
    gdextensionLibs: [],
  };
  const GODOT_THREADS_ENABLED = false;
  var engine = new Engine(GODOT_CONFIG);
  engine.startGame();
});
</script>

<template>
    <canvas id="canvas"></canvas>
</template>

Any help is appreciated!

1 Like

Bump for more help please :pray: