unity-webgl/dist/vue.js

Unity-WebGL provides an easy solution for embedding Unity WebGL builds in your web projects, with two-way communication between your webApp and Unity application with advanced API's.

/*!
 * unity-webgl v4.4.2
 * Copyright (c) 2025 Mariner<mengqing723@gmail.com>
 * Released under the Apache-2.0 License.
 */
'use strict';

var vueDemi = require('vue-demi');

let unityInstanceIdentifier = 0;
function cssUnit(val) {
    return isNaN(val) ? val : val + 'px';
}
var vue = vueDemi.defineComponent({
    name: 'UnityWebglComponent',
    props: {
        unity: {
            type: Object,
        },
        width: {
            type: [String, Number],
            default: '100%',
        },
        height: {
            type: [String, Number],
            default: '100%',
        },
        tabindex: {
            type: [Number, String],
        },
    },
    setup(props) {
        const canvas = vueDemi.ref(null);
        unityInstanceIdentifier++;
        const canvasStyle = vueDemi.computed(() => {
            return {
                width: cssUnit(props.width),
                height: cssUnit(props.height),
            };
        });
        const attrs = {
            id: `unity-canvas-${unityInstanceIdentifier}`,
        };
        if (props.tabindex || props.tabindex === 0) {
            attrs.tabindex = props.tabindex;
        }
        vueDemi.onMounted(() => {
            var _a;
            if (canvas.value) {
                (_a = props.unity) === null || _a === void 0 ? void 0 : _a.render(canvas.value);
            }
        });
        vueDemi.onBeforeUnmount(() => {
            var _a;
            (_a = props.unity) === null || _a === void 0 ? void 0 : _a.unsafe_unload();
        });
        return () => vueDemi.h('canvas', vueDemi.isVue2
            ? {
                ref: canvas,
                attrs,
                style: canvasStyle.value,
            }
            : Object.assign({ ref: canvas, style: canvasStyle.value }, attrs));
    },
});

module.exports = vue;