Vue 3 using bound Object as Datasource

[simonbuehler]

Hi,

i have a Winforms App and bound a App with
chromiumWebBrowser1.JavascriptObjectRepository.Register("App", new ChromeProxy(this), true); with ChromeProxy having a getStuff() Method returning some JSON.
Inside my index.html i have

<script LANGUAGE="JavaScript">
    $(document).ready(function() {
        (async function() {
            await CefSharp.BindObjectAsync("App");
            //The default is to camel case method names (the first letter of the method name is changed to lowercase)
            App.getStuff().then(function(actualResult) {             
                document.getElementById("container").innerHTML = "<pre>"+JSON.stringify(JSON.parse(actualResult),undefined, 2) +"</pre>"           
            });
        })();
    });
    </script>

thats all nice and shiny, the problem is, how can i bring a vue3 component into the game?

i have a SFC like this

<script setup>
import {onMounted, reactive} from 'vue';

onMounted(async () => {
  if (window.App !== undefined) {
    // safe to use the function
    wins.wins = await App.getStuff();
  }else{
    // use mock for devel outside of App
   const response = await fetch("https://jsonplaceholder.typicode.com/posts");
    wins.wins = await response.json();
  }
});

const wins = reactive({ wins: null })
</script>

<template>
  <ul>
    <li v-for="i in wins.wins">{{i}}</li>
  </ul>
</template>

<style scoped>
</style>

which works standalone but how would i connect the compiled index / js to the BindObjectAsync part?

Any idea would be nice!

[amaitland]

CefSharp.BindObjectAsync and the resulting bound object exist in the global scope and should be accessible via window.

window.CefSharp.BindObjectAsync
window.App

[simonbuehler]

Thanks for your swift answer and continuous energy and work you put into this, kudos!