Implement webview example

app/modules/tauri.ts

@@ -1,4 +1,5 @@
 import * as tauriApp from "@tauri-apps/api/app";
+import * as tauriWebviewWindow from "@tauri-apps/api/webviewWindow";
 import * as tauriFs from "@tauri-apps/plugin-fs";
 import * as tauriNotification from "@tauri-apps/plugin-notification";
 import * as tauriOs from "@tauri-apps/plugin-os";
@@ -12,6 +13,7 @@ const capitalize = (name: string) => {
 
 const tauriModules = [
 	{ module: tauriApp, prefix: "App", importPath: "@tauri-apps/api/app" },
+	{ module: tauriWebviewWindow, prefix: "WebviewWindow", importPath: "@tauri-apps/api/webviewWindow" },
 	{ module: tauriShell, prefix: "Shell", importPath: "@tauri-apps/plugin-shell" },
 	{ module: tauriOs, prefix: "Os", importPath: "@tauri-apps/plugin-os" },
 	{ module: tauriNotification, prefix: "Notification", importPath: "@tauri-apps/plugin-notification" },

app/pages/webview.vue

@@ -0,0 +1,48 @@
+<template>
+	<LayoutTile
+		title="Webview window"
+		description="Create new webview in a detached window. This will create a new window flagged 'secondary' that has the same permissions as the main one. If you need more windows, update the permissions under capabilities > main or create a new capabilities file for the new window only."
+	>
+		<div class="flex flex-col items-center gap-6">
+			<UButton variant="subtle" @click="openWindow((new Date).valueOf().toString(), app.repo)">
+				Create external Webview
+			</UButton>
+			<UButton variant="subtle" @click="openWindow('secondary', '/os')">
+				Create internal Webview
+			</UButton>
+		</div>
+	</LayoutTile>
+</template>
+
+<script lang="ts" setup>
+	definePageMeta({
+		name: "Webview",
+		icon: "lucide:app-window-mac"
+	});
+
+	const { app } = useAppConfig();
+	const toast = useToast();
+
+	const openWindow = async (id: string, page: string) => {
+		const webview = new useTauriWebviewWindowWebviewWindow(id, {
+			url: page,
+			width: 1280,
+			height: 720
+		});
+
+		webview.once("tauri://created", () => {
+			toast.add({
+				title: "Success",
+				description: "Webview created",
+				color: "success"
+			});
+		});
+		webview.once("tauri://error", (error) => {
+			toast.add({
+				title: "Error",
+				description: (error as any).payload,
+				color: "error"
+			});
+		});
+	};
+</script>