[C#] Call JS function in a Vue page ?

[galzzy83]

Hi all ! I know that you can call something like ExecuteJS to call a js function inside your CEF page, but if i'm using Vue JS in a single html file, how to I call one of my Vue methods or is there a way to call a Vue methods from my C# client script ?

 

Thank y'all ❤️

[Grintch.]

You want to call an event from client to server or what? 

You can start by creating an event [See here] and then calling it in C# with Remote Events [CLICK]

[Nutter]

Bind your Vue app to the window. This will let you access your app using ExecuteJS.

[galzzy83]

On 7/2/2021 at 10:01 AM, Nutter said:

Bind your Vue app to the window. This will let you access your app using ExecuteJS.

So by doing this.myVue = new Vue... ? And then how would I call a Vue method from the executeJS method, just by doing ExecuteJS("this.myVue.myMethod()") ?

Thanks !

[Nutter]

17 minutes ago, galzzy83 said:

So by doing this.myVue = new Vue... ? And then how would I call a Vue method from the executeJS method, just by doing ExecuteJS("this.myVue.myMethod()") ?

Thanks !

Assign to window or make global variable.

window.myVue = new Vue

You can access methods by calling the method on the instance of a component. You can do this using the children property (forgot the actual name though) that is available on each parent component or use refs.

You should be able to find a few examples on GitHub.

Edited July 4, 2021 by Nutter

[galzzy83]

12 hours ago, Nutter said:

Assign to window or make global variable.

window.myVue = new Vue

You can access methods by calling the method on the instance of a component. You can do this using the children property (forgot the actual name though) that is available on each parent component or use refs.

You should be able to find a few examples on GitHub.

I tried setting up my vue like so: window.characterSelect = new Vue... and then in C# client side ExecuteJS("window.characterSelect.setCharacters()"); and my console log didn't trigger... Am I doing something wrong ? Thanks

[TheOnlyDroid]

22 hours ago, galzzy83 said:

I tried setting up my vue like so: window.characterSelect = new Vue... and then in C# client side ExecuteJS("window.characterSelect.setCharacters()"); and my console log didn't trigger... Am I doing something wrong ? Thanks

If you're using Vue3/Vue Next and the Router framework you could do something like

        public static void SetURL(this HtmlWindow window, string url)
        {
            if(url != null)
            {
                if (url == "/")
                {
                    RAGE.Ui.Cursor.Visible = false;
                } else
                {
                    RAGE.Ui.Cursor.Visible = true;
                }
                    
                string path = $"app.$router.push('{url}');";
                window.ExecuteJs(path);
            }
        }

And the same applies for using the Store with Vue Next as well; You can push it as an json string from the server.

app.store.state.(KEY).(ARRAY) = '{value}'

 

Edited July 6, 2021 by TheOnlyDroid