From 94f4f19b5b85fa42db155aafab3f2b118fd060f0 Mon Sep 17 00:00:00 2001
From: Jade <jade@justbetter.nl>
Date: Mon, 3 Nov 2025 15:30:26 +0100
Subject: [PATCH 1/2] Vue 3 compatibility

---
 README.md               |  4 ++--
 composer.json           |  2 +-
 resources/js/package.js | 12 ++++++------
 3 files changed, 9 insertions(+), 9 deletions(-)

diff --git a/README.md b/README.md
index 9c70b2f..2082f46 100644
--- a/README.md
+++ b/README.md
@@ -31,14 +31,14 @@ Then you can use it like:
 
 ```html
 <input 
-    v-on:change="window.app.$emit('postcode-change', addressVariables)" 
+    v-on:change="window.$emit('postcode-change', addressVariables)" 
     name="postcode" 
     label="Postcode" 
     v-model="addressVariables.postcode" 
     required
 />
 <input 
-    v-on:change="window.app.$emit('postcode-change', addressVariables)" 
+    v-on:change="window.$emit('postcode-change', addressVariables)" 
     name="street[1]" 
     type="number" 
     label="Housenumber" 
diff --git a/composer.json b/composer.json
index 1703b23..bc519d0 100644
--- a/composer.json
+++ b/composer.json
@@ -21,7 +21,7 @@
     "prefer-stable": true,
     "require": {
         "php": "^8.1",
-        "rapidez/core": "^2.8|^3.0|^4.0"
+        "rapidez/core": "^5.0"
     },
     "autoload": {
         "psr-4": {
diff --git a/resources/js/package.js b/resources/js/package.js
index 83c2eec..3b64901 100644
--- a/resources/js/package.js
+++ b/resources/js/package.js
@@ -1,7 +1,7 @@
-import { set, useDebounceFn, useMemoize } from '@vueuse/core'
+import { useDebounceFn, useMemoize } from '@vueuse/core'
 
 document.addEventListener('vue:loaded', function () {
-    window.app.$on(
+    window.$on(
         'postcode-change',
         useDebounceFn(updateAddressFromPro6pp, 100),
     )
@@ -40,12 +40,12 @@ async function updateAddressFromPro6pp(address) {
             response?.error == 'nl_sixpp not found' ||
             response?.error == 'Streetnumber not found'
         ) {
-            set(address, 'city', '')
-            set(address.street, 0, '')
+            address.city = ''
+            address.street[0] = ''
         }
         return
     }
 
-    set(address, 'city', foundAddress.city)
-    set(address.street, 0, foundAddress.street)
+    address.city = foundAddress.city
+    address.street[0] = foundAddress.street
 }

From b133b46d0920b8b7cff603cf3c3e9d123bf23e06 Mon Sep 17 00:00:00 2001
From: Jade <jade@justbetter.nl>
Date: Tue, 4 Nov 2025 10:04:06 +0100
Subject: [PATCH 2/2] Use autoremove false

---
 resources/js/package.js | 10 +++-------
 1 file changed, 3 insertions(+), 7 deletions(-)

diff --git a/resources/js/package.js b/resources/js/package.js
index 3b64901..c491e49 100644
--- a/resources/js/package.js
+++ b/resources/js/package.js
@@ -1,11 +1,5 @@
 import { useDebounceFn, useMemoize } from '@vueuse/core'
-
-document.addEventListener('vue:loaded', function () {
-    window.$on(
-        'postcode-change',
-        useDebounceFn(updateAddressFromPro6pp, 100),
-    )
-})
+import { on } from 'Vendor/rapidez/core/resources/js/polyfills/emit.js'
 
 const getAddressFromPro6pp = useMemoize(async function (postcode, housenumber) {
     return window.rapidezAPI(
@@ -49,3 +43,5 @@ async function updateAddressFromPro6pp(address) {
     address.city = foundAddress.city
     address.street[0] = foundAddress.street
 }
+
+on('postcode-change', useDebounceFn(updateAddressFromPro6pp, 100), { autoremove: false })