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>

eslint.config.mjs

@@ -29,6 +29,7 @@ export default eslintConfig(
 			"vue/comma-dangle": ["warn", "never"],
 			"antfu/top-level-function": "off",
 			"antfu/if-newline": "off",
+			"new-cap": "off",
 			"node/prefer-global/process": ["off"]
 		}
 	},

src-tauri/Cargo.toml

@@ -29,7 +29,10 @@ serde_json = "1"
 
 [dependencies.tauri]
 version = "2.2.5"
-features = [ "tray-icon" ]
+features = [
+  "tray-icon",
+  "unstable"
+]
 
 [dependencies.serde]
 version = "1"

src-tauri/capabilities/main.json

@@ -1,9 +1,10 @@
 {
 	"$schema": "../gen/schemas/desktop-schema.json",
 	"identifier": "main",
-	"description": "Capabilities for the main window",
+	"description": "Capabilities for the app window",
 	"windows": [
-		"main"
+		"main",
+		"secondary"
 	],
 	"permissions": [
 		"core:path:default",
@@ -38,6 +39,8 @@
 		"os:allow-locale",
 		"fs:allow-document-read",
 		"fs:allow-document-write",
-		"store:default"
+		"store:default",
+		"core:webview:allow-create-webview",
+		"core:webview:allow-create-webview-window"
 	]
 }

src-tauri/gen/schemas/capabilities.json

@@ -1 +1 @@
-{"main":{"identifier":"main","description":"Capabilities for the main window","local":true,"windows":["main"],"permissions":["core:path:default","core:event:default","core:window:default","core:app:default","core:resources:default","core:menu:default","core:tray:default","shell:allow-open",{"identifier":"shell:allow-execute","allow":[{"args":["-c",{"validator":"\\S+"}],"cmd":"sh","name":"exec-sh","sidecar":false}]},"notification:default","os:allow-platform","os:allow-arch","os:allow-family","os:allow-version","os:allow-locale","fs:allow-document-read","fs:allow-document-write","store:default"]}}
+{"main":{"identifier":"main","description":"Capabilities for the app window","local":true,"windows":["main","secondary"],"permissions":["core:path:default","core:event:default","core:window:default","core:app:default","core:resources:default","core:menu:default","core:tray:default","shell:allow-open",{"identifier":"shell:allow-execute","allow":[{"args":["-c",{"validator":"\\S+"}],"cmd":"sh","name":"exec-sh","sidecar":false}]},"notification:default","os:allow-platform","os:allow-arch","os:allow-family","os:allow-version","os:allow-locale","fs:allow-document-read","fs:allow-document-write","store:default","core:webview:allow-create-webview","core:webview:allow-create-webview-window"]}}