Using ZIM with InertiaJs & Vue3 - One Way

Examples
1

Forgot to mention that I am using InertiaJs a wrapper that ties Vue3 (React) with Laravel. I am initializing ZIM in a custom directive like vZimFrame = {}; So my final working example is:

<script setup>
import { Head, Link } from '@inertiajs/vue3';
import StartLayout from '@/Layouts/StartLayout.vue';
defineOptions({ layout: StartLayout });

var frame;
var zimReady = () => {

    frame = new Frame({scaling: FIT, width: 1280, height: 720, color:clear, ready: ready});

    function ready() {
        let game = new Container(W,H).addTo();
        zog(game);
        // put code here
        new Rectangle(W,H,black).center(game);
        let circle = new Circle(50, red).center(game).drag(game);
        new Label('Hello', 18, null, black).center(circle);
    }
}

const vGuestFrame = {
    beforeMount: (el) => {
        zimReady();
    },
    beforeUnmount: (el) => {
        console.log('dispose');
        frame.dispose();
    }
};
    
const year = new Date().getFullYear();
</script>

<template>
    <Head title="Start" />
    <div v-guest-frame style="z-index: 1"></div>
</template>
1 Like