diff --git a/src/ui/src/components/core/root/CoreRoot.vue b/src/ui/src/components/core/root/CoreRoot.vue
index 8e3573694..d6c2b762a 100644
--- a/src/ui/src/components/core/root/CoreRoot.vue
+++ b/src/ui/src/components/core/root/CoreRoot.vue
@@ -17,15 +17,14 @@ import { useEvaluator } from "@/renderer/useEvaluator";
 const ssHashChangeStub = `
 def handle_hashchange(state, payload):
 	# The payload is a dictionary with the page key and all the route variables in the URL hash.
-	# For example, if the current URL is
-	# http://localhost:3000/#main/animal=duck&colour=yellow
+	# For example, if the current URL is http://localhost:3000/#main/animal=duck&colour=yellow
 	# you will get the following dictionary
 	# {
-	#	"page_key": "main",
-	#	"route_vars": {
-	#		"animal": "duck",
-	#		"colour": "yellow"
-	#	}
+	#	  "page_key": "main",
+	#	  "route_vars": {
+	#		  "animal": "duck",
+	#		  "colour": "yellow"
+	#	  }
 	# }
 
 	page_key = payload.get("page_key")
@@ -39,6 +38,23 @@ def handle_hashchange(state, payload):
 	else:
 		state["message"] = "You're not in the Duck zone.`.trim();
 
+const wfAppOpenStub = `
+def handle_app_open(state):
+	# The payload is a dictionary with the page key and all the route variables in the URL hash.
+	# For example, if the current URL is http://localhost:3000/#/animal=duck&colour=yellow
+	# you will get the following dictionary
+	# {
+	#   "page_key": "main",
+	#	  "route_vars": {
+	#		  "animal": "duck",
+	#		  "colour": "yellow"
+	#	  }
+	# }
+
+	page_key = payload.get("page_key")
+	route_vars = payload.get("route_vars")
+`.trim();
+
 const description =
 	"The root component of the application, which serves as the starting point of the component hierarchy.";
 
@@ -57,6 +73,10 @@ export default {
 			...sharedStyleFields,
 		},
 		events: {
+			"wf-app-open": {
+				desc: "Captures the first application load, including page key and route vars.",
+				stub: wfAppOpenStub,
+			},
 			"wf-hashchange": {
 				desc: "Capture changes to the URL hash, including page key and route vars.",
 				stub: ssHashChangeStub,
@@ -74,6 +94,7 @@ import {
 	watch,
 	nextTick,
 	onBeforeMount,
+	onMounted,
 } from "vue";
 import injectionKeys from "@/injectionKeys";
 import { changePageInHash, getParsedHash } from "@/core/navigation";
@@ -126,12 +147,26 @@ watch(displayedPageId, (newPageId) => {
 	changePageInHash(pageKey);
 });
 
+function handleAppOpenChange() {
+	const parsedHash = getParsedHash();
+	const event = new CustomEvent("wf-app-open", {
+		detail: {
+			payload: parsedHash,
+		},
+	});
+	rootEl.value?.dispatchEvent(event);
+}
+
 onBeforeMount(() => {
 	window.addEventListener("hashchange", () => {
 		handleHashChange();
 	});
 	handleHashChange();
 });
+
+onMounted(() => {
+	handleAppOpenChange();
+});
 </script>
 
 <style scoped>
diff --git a/src/writer/core.py b/src/writer/core.py
index b5b194740..7d33480e1 100644
--- a/src/writer/core.py
+++ b/src/writer/core.py
@@ -1306,6 +1306,16 @@ def _transform_page_open(self, ev) -> str:
         payload = str(ev.payload)
         return payload
 
+    def _transform_app_open(self, ev) -> dict:
+        payload = ev.payload
+        page_key = payload.get("pageKey")
+        route_vars = dict(payload.get("routeVars"))
+        tf_payload = {
+            "page_key": page_key,
+            "route_vars": route_vars
+        }
+        return tf_payload
+
     def _transform_chatbot_message(self, ev) -> dict:
         payload = dict(ev.payload)
         return payload