How to communicate between .net MAUI with a BlazorWebView and a Vue3 Project? - webview

Question

We currently have a .net MAUI project with a BlazorWebView:
<?xml version="1.0" encoding="utf-8"?>
<ContentPage xmlns="http://schemas.microsoft.com/dotnet/2021/maui"
xmlns:x="http://schemas.microsoft.com/winfx/2009/xaml"
xmlns:local="clr-namespace:MauiApp1"
x:Class="MauiApp1.MainPage">
<VerticalStackLayout Spacing="20" Padding="20" Background="#25a6fb">
<Label Text="Communicate between MAUI (C#) and BlazorWebView (JS)" TextColor="White" FontSize="20"
FontAttributes="Bold" HorizontalTextAlignment="Center" HorizontalOptions="Center" />
<VerticalStackLayout BackgroundColor="#25a6fb" Padding="10" Spacing="10">
<Frame Padding="10, 5">
<Entry x:Name="MauiEntry" Placeholder="Entry from MAUI" PlaceholderColor="Gray" TextColor="Gray" />
</Frame>
<HorizontalStackLayout HorizontalOptions="Center" Spacing="20">
<Button Text="MAUI to WebView" Clicked="MauiToWebView" />
</HorizontalStackLayout>
</VerticalStackLayout>
<BlazorWebView x:Name="BlazorWebView" HostPage="wwwroot/dist/index.html" WidthRequest="375" HeightRequest="400">
<BlazorWebView.RootComponents>
<RootComponent Selector="app" ComponentType="{x:Type local:Main}" />
</BlazorWebView.RootComponents>
</BlazorWebView>
<VerticalStackLayout>
</VerticalStackLayout>
</VerticalStackLayout>
</ContentPage>
And also just a basic Vue3 Project with nothing special.
We build the Vue3 project and then with a SymbolicLink show the dist/build folder in the .net MAUI project. And reference its index.html in the BlazorWebView.
We would like to call information back and forth between both projects.
We tried using JSInterop in the Main.razor file, but this didn't work.
#inject IJSRuntime Js
<Router AppAssembly="#typeof(Main).Assembly">
<Found Context="routeData">
<RouteView RouteData="#routeData"/>
<FocusOnNavigate RouteData="#routeData" Selector="h1"/>
</Found>
<NotFound>
<LayoutView>
<p role="alert">Sorry, there's nothing at this address.</p>
</LayoutView>
</NotFound>
</Router>
<br><br>
<code #ref="_codeBlock"></code>
#code
{
private ElementReference _codeBlock;
public async Task PrintDotNetObject()
{
var obj = new {
FistName = "Jon",
LastName = "Doe",
Age = 27,
BirthDate = DateTime.Now.AddYears(-27),
LikesDotNet = true
};
await Js.InvokeVoidAsync("dotNetMauiApp.getMessage", _codeBlock, obj);
}
}
PrintDotNetObject gets called when we click the button in the xaml file.
And this is what we had in the Vue3 Project:
<script>
export default {
name: "MauiCommunication",
mounted() {
window.dotNetMauiApp = {
getMessage: function(node, objectFromDotNet)
{
node.textContent = JSON.stringify(objectFromDotNet);
return window.alert("Called From MAUI " + node.textContent)
}
};
}
}
</script>
But we got a null reference for JSRuntime when using this. So is there a way to fix this? Or is there another (better) way to do this?