Vue3 support

[Slluxx]

Describe the problem I found out that Eel is very much usable with vue. JS can call python and get a return value without a problem. My problem is that i cant figure out a way how to expose vue methods that can be called by python.

Code snippet(s) Here is some code that can be easily used to reproduce the problem or understand what I need help with.

const { createApp } = Vue
        createApp({
            data() {
                return {
                    message: "",
                    inputValue: "",
                    response: ""
                }
            },
            mounted: function () {
                eel.hello_world()((val) => { // this works js -> py -> js (callback)
                    this.message = val
                })
            },
            methods: {
                onClick() { // this works js -> py -> js (callback)
                    eel.print_string(this.inputValue)((val) => {
                        this.response = val
                    })
                },

                // it needs to be exposed? eel.expose(this.calledFromPython) does not work
                calledFromPython() { // how can this be called from python? py -> js
                    alert("pythonCalledThis");
                }
            }
        }).mount('#app')

Desktop (please complete the following information):

• OS: Win
• Browser: Chrome
• Version: latest?

[Slluxx]

I figured it out

    const { createApp } = Vue

    const app = createApp({
        mounted: function () {
        },
        methods: {
            toPy_print() {
                eel.print_string(inVal)((retVal) => {
                    // Return response from Python.
                    // this.response = retVal
                })
            },
            alert(text) {
                alert(text)
            }
        },
        data() {
            return {
            }
        },
    }).mount('#app');

    eel.expose(fromPy_alert);
    function fromPy_alert(text) {
        app.alert(text);
    }

import eel
eel.init('web')

@eel.expose
def print_string(text):
    print(text)
    return True

eel.fromPy_alert("Eel started")
eel.start('index.html', size=(640, 320))

calling vue methods from outside is not good though. its called anti-pattern and should be avoided. there seems to be no other way and for things like chat apps, where the incoming message to python should update js - instead of js requesting updates from python, it has to be this way.