diff --git a/core/src/components/infinite-scroll-content/readme.md b/core/src/components/infinite-scroll-content/readme.md
index ddef2f08bb..a0573fb8f7 100644
--- a/core/src/components/infinite-scroll-content/readme.md
+++ b/core/src/components/infinite-scroll-content/readme.md
@@ -69,15 +69,35 @@ export class InfiniteScrollContentExample {
 
 ```html
 <template>
-  <ion-content>
-    <ion-infinite-scroll>
-      <ion-infinite-scroll-content
-        loadingSpinner="bubbles"
-        loadingText="Loading more data…">
-      </ion-infinite-scroll-content>
-    </ion-infinite-scroll>
-  </ion-content>
+  <ion-page>
+    <ion-content>
+      <ion-infinite-scroll>
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          loading-text="Loading more data…">
+        </ion-infinite-scroll-content>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-page>
 </template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonPage
+ } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonContent,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent,
+    IonPage
+  }
+});
 ```
 
 
diff --git a/core/src/components/infinite-scroll-content/usage/vue.md b/core/src/components/infinite-scroll-content/usage/vue.md
index 65e63e4686..0657b69155 100644
--- a/core/src/components/infinite-scroll-content/usage/vue.md
+++ b/core/src/components/infinite-scroll-content/usage/vue.md
@@ -1,12 +1,32 @@
 ```html
 <template>
-  <ion-content>
-    <ion-infinite-scroll>
-      <ion-infinite-scroll-content
-        loadingSpinner="bubbles"
-        loadingText="Loading more data…">
-      </ion-infinite-scroll-content>
-    </ion-infinite-scroll>
-  </ion-content>
+  <ion-page>
+    <ion-content>
+      <ion-infinite-scroll>
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          loading-text="Loading more data…">
+        </ion-infinite-scroll-content>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-page>
 </template>
+
+<script lang="ts">
+import {
+  IonContent,
+  IonInfiniteScroll,
+  IonInfiniteScrollContent,
+  IonPage
+ } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonContent,
+    IonInfiniteScroll,
+    IonInfiniteScrollContent,
+    IonPage
+  }
+});
 ```
diff --git a/core/src/components/infinite-scroll/readme.md b/core/src/components/infinite-scroll/readme.md
index 13f6b7a68f..0f83570bc8 100644
--- a/core/src/components/infinite-scroll/readme.md
+++ b/core/src/components/infinite-scroll/readme.md
@@ -193,6 +193,104 @@ export class InfiniteScrollExample {
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-page>
+    <ion-content class="ion-padding">
+      <ion-button @click="toggleInfiniteScroll" expand="block">
+        Toggle Infinite Scroll
+      </ion-button>
+    
+      <ion-list>
+        <ion-item v-for="item in items" :key="item">
+          <ion-label>{{ item }}</ion-label>
+        </ion-item>
+      </ion-list>
+    
+      <ion-infinite-scroll
+        @ionInfinite="loadData($event)" 
+        threshold="100px" 
+        id="infinite-scroll"
+        :disabled="isDisabled"
+      >
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          loading-text="Loading more data...">
+        </ion-infinite-scroll-content>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { 
+  IonButton,
+  IonContent, 
+  IonInfiniteScroll, 
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage
+ } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+ 
+export default defineComponent({
+  components: {
+    IonButton,
+    IonContent, 
+    IonInfiniteScroll, 
+    IonInfiniteScrollContent,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonPage
+  },
+  setup() {
+    const isDisabled = ref(false);
+    const toggleInfiniteScroll = () => {
+      isDisabled.value = !isDisabled.value;
+    }
+    const items = ref([]);
+    const pushData = () => {
+      const max = items.value.length + 20;
+      const min = max - 20;
+      for (let i = min; i < max; i++) {
+        items.value.push(i);
+      }
+    }
+    
+    const loadData = (ev: CustomEvent) => {
+      setTimeout(() => {
+        pushData();
+        console.log('Loaded data');
+        ev.target.complete();
+  
+        // App logic to determine if all data is loaded
+        // and disable the infinite scroll
+        if (items.value.length == 1000) {
+          ev.target.disabled = true;
+        }
+      }, 500);
+    }
+    
+    pushData();
+    
+    return {
+      isDisabled,
+      toggleInfiniteScroll,
+      loadData,
+      items
+    }
+  }
+});
+
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/infinite-scroll/usage/vue.md b/core/src/components/infinite-scroll/usage/vue.md
new file mode 100644
index 0000000000..3c702263a7
--- /dev/null
+++ b/core/src/components/infinite-scroll/usage/vue.md
@@ -0,0 +1,94 @@
+```html
+<template>
+  <ion-page>
+    <ion-content class="ion-padding">
+      <ion-button @click="toggleInfiniteScroll" expand="block">
+        Toggle Infinite Scroll
+      </ion-button>
+    
+      <ion-list>
+        <ion-item v-for="item in items" :key="item">
+          <ion-label>{{ item }}</ion-label>
+        </ion-item>
+      </ion-list>
+    
+      <ion-infinite-scroll
+        @ionInfinite="loadData($event)" 
+        threshold="100px" 
+        id="infinite-scroll"
+        :disabled="isDisabled"
+      >
+        <ion-infinite-scroll-content
+          loading-spinner="bubbles"
+          loading-text="Loading more data...">
+        </ion-infinite-scroll-content>
+      </ion-infinite-scroll>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script lang="ts">
+import { 
+  IonButton,
+  IonContent, 
+  IonInfiniteScroll, 
+  IonInfiniteScrollContent,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonPage
+ } from '@ionic/vue';
+import { defineComponent, ref } from 'vue';
+ 
+export default defineComponent({
+  components: {
+    IonButton,
+    IonContent, 
+    IonInfiniteScroll, 
+    IonInfiniteScrollContent,
+    IonItem,
+    IonLabel,
+    IonList,
+    IonPage
+  },
+  setup() {
+    const isDisabled = ref(false);
+    const toggleInfiniteScroll = () => {
+      isDisabled.value = !isDisabled.value;
+    }
+    const items = ref([]);
+    const pushData = () => {
+      const max = items.value.length + 20;
+      const min = max - 20;
+      for (let i = min; i < max; i++) {
+        items.value.push(i);
+      }
+    }
+    
+    const loadData = (ev: CustomEvent) => {
+      setTimeout(() => {
+        pushData();
+        console.log('Loaded data');
+        ev.target.complete();
+  
+        // App logic to determine if all data is loaded
+        // and disable the infinite scroll
+        if (items.value.length == 1000) {
+          ev.target.disabled = true;
+        }
+      }, 500);
+    }
+    
+    pushData();
+    
+    return {
+      isDisabled,
+      toggleInfiniteScroll,
+      loadData,
+      items
+    }
+  }
+});
+
+</script>
+```
\ No newline at end of file