diff --git a/packages/alpinejs/src/utils/on.js b/packages/alpinejs/src/utils/on.js
index d877d87c9..ddcab45bb 100644
--- a/packages/alpinejs/src/utils/on.js
+++ b/packages/alpinejs/src/utils/on.js
@@ -18,6 +18,7 @@ export default function on (el, event, modifiers, callback) {
     if (modifiers.includes('capture')) options.capture = true
     if (modifiers.includes('window')) listenerTarget = window
     if (modifiers.includes('document')) listenerTarget = document
+    if (modifiers.includes('visual')) listenerTarget = window.visualViewport
 
     // By wrapping the handler with debounce & throttle first, we ensure that the wrapping logic itself is not
     // throttled/debounced, only the user's callback is. This way, if the user expects
diff --git a/tests/cypress/integration/directives/x-on.spec.js b/tests/cypress/integration/directives/x-on.spec.js
index 47d598ec1..5410cd5ef 100644
--- a/tests/cypress/integration/directives/x-on.spec.js
+++ b/tests/cypress/integration/directives/x-on.spec.js
@@ -247,6 +247,21 @@ test('.window modifier',
     }
 )
 
+test('.viewport modifier',
+    html`
+        <div x-data="{ foo: 'bar' }">
+            <div x-on:resize.visual="foo = window.visualViewport.width"></div>
+            <span x-text="foo"></span>
+        </div>
+
+    `,
+    ({ get, viewport }) => {
+        get('span').should(haveText('bar'))
+        viewport('iphone-6')
+        get('span').should(haveText('375'))
+    }
+)
+
 test('expressions can start with if',
     html`
         <div x-data="{ foo: 'bar' }">