From e4dc795446af33a68861e9cc2353697c63c48096 Mon Sep 17 00:00:00 2001
From: Tom <tmaltby19@gmail.com>
Date: Tue, 14 Nov 2023 14:09:27 +0700
Subject: [PATCH] init

---
 docs/use_with/vue.md | 56 +++++++++++++++++++++++++++++++++++++++++++-
 1 file changed, 55 insertions(+), 1 deletion(-)

diff --git a/docs/use_with/vue.md b/docs/use_with/vue.md
index d6b8ed507..cab8a5881 100644
--- a/docs/use_with/vue.md
+++ b/docs/use_with/vue.md
@@ -1,4 +1,4 @@
-## Vue
+## Vue2
 
 Create the following Vue directive
 
@@ -28,3 +28,57 @@ and then include it on your page as follows.
 ```
 
 - Thanks to [Aldebaran Desombergh](https://github.com/davidjbradshaw/iframe-resizer/issues/513#issuecomment-538333854) for this example
+
+## Vue3 (with Typescript)
+
+Create the following Vue directive (EG `utils/directives/iframeResize.ts`)
+
+```ts
+import { Directive, DirectiveBinding } from 'vue'
+import iframeResize from 'iframe-resizer/js/iframeResizer'
+
+interface ResizableHTMLElement extends HTMLElement {
+    iFrameResizer?: {
+        removeListeners: () => void
+    }
+}
+
+const resize: Directive = {
+    mounted(el: HTMLElement, binding: DirectiveBinding) {
+        const options = binding.value || {}
+
+        el.addEventListener('load', () => iframeResize(options, el))
+    },
+    unmounted(el: HTMLElement) {
+        const resizableEl = el as ResizableHTMLElement
+
+        if (resizableEl.iFrameResizer) {
+            resizableEl.iFrameResizer.removeListeners()
+        }
+    },
+}
+
+export default resize
+```
+
+Register the directive
+```ts
+const app = createApp(App)
+...
+app.directive('resize', iframeResize)
+...
+app.mount('#app')
+
+```
+
+and then include it on your page as follows.
+
+```html
+<iframe
+  v-resize="{ log: true }"
+  width="100%"
+  src="myiframe.html"
+  frameborder="0"
+></iframe>
+```
+