From db2cac20fb04a76a46679b18656d55d94208096c Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@users.noreply.github.com>
Date: Fri, 11 Sep 2020 13:48:21 -0400
Subject: [PATCH] docs(vue): update component usage examples for vue 3 (#22050)

---
 core/src/components/action-sheet/readme.md    | 20 +++--
 core/src/components/action-sheet/usage/vue.md | 20 +++--
 core/src/components/alert/readme.md           | 70 ++++++++--------
 core/src/components/alert/usage/vue.md        | 70 ++++++++--------
 core/src/components/avatar/readme.md          |  9 ++
 core/src/components/avatar/usage/vue.md       |  9 ++
 core/src/components/back-button/readme.md     |  9 ++
 core/src/components/back-button/usage/vue.md  |  9 ++
 core/src/components/backdrop/readme.md        | 19 +++--
 core/src/components/backdrop/usage/vue.md     | 19 +++--
 core/src/components/badge/readme.md           |  9 ++
 core/src/components/badge/usage/vue.md        |  9 ++
 core/src/components/button/readme.md          |  9 ++
 core/src/components/button/usage/vue.md       |  9 ++
 core/src/components/buttons/readme.md         | 20 ++++-
 core/src/components/buttons/usage/vue.md      | 20 ++++-
 core/src/components/card/readme.md            | 23 +++--
 core/src/components/card/usage/vue.md         | 23 +++--
 core/src/components/checkbox/readme.md        | 15 ++--
 core/src/components/checkbox/usage/vue.md     | 15 ++--
 core/src/components/chip/readme.md            | 26 ++++--
 core/src/components/chip/usage/vue.md         | 26 ++++--
 core/src/components/content/readme.md         | 12 ++-
 core/src/components/content/usage/vue.md      | 12 ++-
 core/src/components/datetime/readme.md        | 25 ++++--
 core/src/components/datetime/usage/vue.md     | 25 ++++--
 core/src/components/fab-button/readme.md      |  9 ++
 core/src/components/fab-button/usage/vue.md   |  9 ++
 core/src/components/fab-list/readme.md        |  9 ++
 core/src/components/fab-list/usage/vue.md     |  9 ++
 core/src/components/fab/readme.md             | 55 ++++++++++++
 core/src/components/fab/usage/vue.md          | 55 ++++++++++++
 core/src/components/footer/readme.md          |  9 ++
 core/src/components/footer/usage/vue.md       |  9 ++
 core/src/components/grid/readme.md            |  9 ++
 core/src/components/grid/usage/vue.md         |  9 ++
 core/src/components/header/readme.md          | 23 +++++
 core/src/components/header/usage/vue.md       | 23 +++++
 core/src/components/icon/usage/vue.md         | 21 ++++-
 core/src/components/img/readme.md             | 22 +++++
 core/src/components/img/usage/vue.md          | 22 +++++
 core/src/components/input/readme.md           |  9 ++
 core/src/components/input/usage/vue.md        |  9 ++
 core/src/components/item-divider/readme.md    |  9 ++
 core/src/components/item-divider/usage/vue.md |  9 ++
 core/src/components/item-group/readme.md      | 24 ++++++
 core/src/components/item-group/usage/vue.md   | 24 ++++++
 core/src/components/item-sliding/readme.md    | 65 ++++++++++++---
 core/src/components/item-sliding/usage/vue.md | 65 ++++++++++++---
 core/src/components/item/readme.md            | 81 +++++++++++++++---
 core/src/components/item/usage/vue.md         | 81 +++++++++++++++---
 core/src/components/label/readme.md           | 21 +++++
 core/src/components/label/usage/vue.md        | 21 +++++
 core/src/components/list-header/readme.md     |  9 ++
 core/src/components/list-header/usage/vue.md  |  9 ++
 core/src/components/list/readme.md            | 31 +++++++
 core/src/components/list/usage/vue.md         | 31 +++++++
 core/src/components/loading/readme.md         | 54 ++++++------
 core/src/components/loading/usage/vue.md      | 54 ++++++------
 core/src/components/menu/readme.md            | 47 +++++++----
 core/src/components/menu/usage/vue.md         | 47 +++++++----
 core/src/components/modal/readme.md           | 20 +++--
 core/src/components/modal/usage/vue.md        | 20 +++--
 core/src/components/note/readme.md            |  9 ++
 core/src/components/note/usage/vue.md         |  9 ++
 core/src/components/popover/readme.md         | 52 ++++++++++++
 core/src/components/popover/usage/vue.md      | 48 +++++++++++
 core/src/components/progress-bar/readme.md    |  9 ++
 core/src/components/progress-bar/usage/vue.md |  9 ++
 core/src/components/radio-group/readme.md     | 23 +++++
 core/src/components/radio-group/usage/vue.md  | 23 +++++
 core/src/components/radio/readme.md           | 23 +++++
 core/src/components/radio/usage/vue.md        | 23 +++++
 core/src/components/range/readme.md           |  8 +-
 core/src/components/range/usage/vue.md        |  8 +-
 core/src/components/refresher/readme.md       | 18 ++--
 core/src/components/refresher/usage/vue.md    | 18 ++--
 core/src/components/reorder-group/readme.md   | 46 +++++++---
 .../src/components/reorder-group/usage/vue.md | 46 +++++++---
 core/src/components/reorder/readme.md         | 27 +++++-
 core/src/components/reorder/usage/vue.md      | 27 +++++-
 core/src/components/ripple-effect/readme.md   |  9 ++
 .../src/components/ripple-effect/usage/vue.md |  9 ++
 core/src/components/router-outlet/readme.md   |  8 +-
 core/src/components/searchbar/readme.md       |  9 ++
 core/src/components/searchbar/usage/vue.md    |  9 ++
 core/src/components/segment-button/readme.md  | 55 +++++++-----
 .../components/segment-button/usage/vue.md    | 55 +++++++-----
 core/src/components/segment/readme.md         | 11 ++-
 core/src/components/segment/usage/vue.md      | 11 ++-
 core/src/components/select-option/readme.md   | 40 ++++++---
 .../src/components/select-option/usage/vue.md | 40 ++++++---
 core/src/components/select/readme.md          | 83 +++++++++++++++++--
 core/src/components/select/usage/vue.md       | 83 +++++++++++++++++--
 core/src/components/skeleton-text/readme.md   | 54 ++++++++----
 .../src/components/skeleton-text/usage/vue.md | 54 ++++++++----
 core/src/components/slides/readme.md          | 14 ++--
 core/src/components/slides/usage/vue.md       | 14 ++--
 core/src/components/spinner/readme.md         |  9 ++
 core/src/components/spinner/usage/vue.md      |  9 ++
 core/src/components/split-pane/readme.md      | 23 +++++
 core/src/components/split-pane/usage/vue.md   | 23 +++++
 core/src/components/tab-bar/readme.md         | 19 ++++-
 core/src/components/tab-bar/usage/vue.md      | 19 ++++-
 core/src/components/tab-button/readme.md      | 33 +++++++-
 core/src/components/tab-button/usage/vue.md   | 33 +++++++-
 core/src/components/textarea/readme.md        |  9 ++
 core/src/components/textarea/usage/vue.md     |  9 ++
 core/src/components/thumbnail/readme.md       |  9 ++
 core/src/components/thumbnail/usage/vue.md    |  9 ++
 core/src/components/title/readme.md           | 67 +++++++++++++--
 core/src/components/title/usage/vue.md        | 67 +++++++++++++--
 core/src/components/toast/readme.md           | 57 +++++++++++++
 core/src/components/toast/usage/vue.md        | 53 ++++++++++++
 core/src/components/toggle/readme.md          | 26 ++++--
 core/src/components/toggle/usage/vue.md       | 26 ++++--
 core/src/components/toolbar/readme.md         | 71 ++++++++++++----
 core/src/components/toolbar/usage/vue.md      | 71 ++++++++++++----
 118 files changed, 2647 insertions(+), 544 deletions(-)
 create mode 100644 core/src/components/popover/usage/vue.md
 create mode 100644 core/src/components/toast/usage/vue.md

diff --git a/core/src/components/action-sheet/readme.md b/core/src/components/action-sheet/readme.md
index 62988a68ef..4a70de38e3 100644
--- a/core/src/components/action-sheet/readme.md
+++ b/core/src/components/action-sheet/readme.md
@@ -280,16 +280,18 @@ export class ActionSheetExample {
 
 ```html
 <template>
-  <IonVuePage :title="'Action Sheet'">
-    <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
-  </IonVuePage>
+  <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
 </template>
 
 <script>
-export default {
+import { IonButton, actionSheetController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton },
   methods: {
-    presentActionSheet() {
-      return this.$ionic.actionSheetController
+    async presentActionSheet() {
+      const actionSheet = await actionSheetController
         .create({
           header: 'Albums',
           cssClass: 'my-custom-class',
@@ -332,11 +334,11 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return actionSheet.present();
     },
   },
-}
+});
 </script>
 ```
 
diff --git a/core/src/components/action-sheet/usage/vue.md b/core/src/components/action-sheet/usage/vue.md
index b0464508aa..b2e3658ecf 100644
--- a/core/src/components/action-sheet/usage/vue.md
+++ b/core/src/components/action-sheet/usage/vue.md
@@ -1,15 +1,17 @@
 ```html
 <template>
-  <IonVuePage :title="'Action Sheet'">
-    <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
-  </IonVuePage>
+  <ion-button @click="presentActionSheet">Show Action Sheet</ion-button>
 </template>
 
 <script>
-export default {
+import { IonButton, actionSheetController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton },
   methods: {
-    presentActionSheet() {
-      return this.$ionic.actionSheetController
+    async presentActionSheet() {
+      const actionSheet = await actionSheetController
         .create({
           header: 'Albums',
           cssClass: 'my-custom-class',
@@ -52,10 +54,10 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return actionSheet.present();
     },
   },
-}
+});
 </script>
 ```
diff --git a/core/src/components/alert/readme.md b/core/src/components/alert/readme.md
index c76f62853c..5ed7034655 100644
--- a/core/src/components/alert/readme.md
+++ b/core/src/components/alert/readme.md
@@ -1155,45 +1155,47 @@ export class AlertExample {
 
 ```html
 <template>
-  <IonVuePage :title="'Alert'">
-    <ion-button @click="presentAlert">Show Alert</ion-button>
-    <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
-    <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
-    <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
-    <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
-    <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
-  </IonVuePage>
+  <ion-button @click="presentAlert">Show Alert</ion-button>
+  <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
+  <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
+  <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
+  <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
+  <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
 </template>
 
 <script>
-export default {
+import { IonButton, alertController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton },
   methods: {
-    presentAlert() {
-      return this.$ionic.alertController
+    async presentAlert() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Alert',
           subHeader: 'Subtitle',
           message: 'This is an alert message.',
           buttons: ['OK'],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertMultipleButtons() {
-      return this.$ionic.alertController
+    async presentAlertMultipleButtons() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Alert',
           subHeader: 'Subtitle',
           message: 'This is an alert message.',
           buttons: ['Cancel', 'Open Modal', 'Delete'],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertConfirm() {
-      return this.$ionic.alertController
+    async presentAlertConfirm() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Confirm!',
@@ -1214,12 +1216,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertPrompt() {
-      return this.$ionic.alertController
+    async presentAlertPrompt() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Prompt!',
@@ -1288,12 +1290,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertRadio() {
-      return this.$ionic.alertController
+    async presentAlertRadio() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Radio',
@@ -1346,12 +1348,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertCheckbox() {
-      return this.$ionic.alertController
+    async presentAlertCheckbox() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Checkbox',
@@ -1409,11 +1411,11 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
   },
-}
+});
 </script>
 ```
 
diff --git a/core/src/components/alert/usage/vue.md b/core/src/components/alert/usage/vue.md
index 88f99b8430..cf90273088 100644
--- a/core/src/components/alert/usage/vue.md
+++ b/core/src/components/alert/usage/vue.md
@@ -1,44 +1,46 @@
 ```html
 <template>
-  <IonVuePage :title="'Alert'">
-    <ion-button @click="presentAlert">Show Alert</ion-button>
-    <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
-    <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
-    <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
-    <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
-    <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
-  </IonVuePage>
+  <ion-button @click="presentAlert">Show Alert</ion-button>
+  <ion-button @click="presentAlertMultipleButtons">Show Alert (multiple buttons)</ion-button>
+  <ion-button @click="presentAlertConfirm">Show Alert (confirm)</ion-button>
+  <ion-button @click="presentAlertPrompt">Show Alert (prompt)</ion-button>
+  <ion-button @click="presentAlertRadio">Show Alert (radio)</ion-button>
+  <ion-button @click="presentAlertCheckbox">Show Alert (checkbox)</ion-button>
 </template>
 
 <script>
-export default {
+import { IonButton, alertController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton },
   methods: {
-    presentAlert() {
-      return this.$ionic.alertController
+    async presentAlert() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Alert',
           subHeader: 'Subtitle',
           message: 'This is an alert message.',
           buttons: ['OK'],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertMultipleButtons() {
-      return this.$ionic.alertController
+    async presentAlertMultipleButtons() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Alert',
           subHeader: 'Subtitle',
           message: 'This is an alert message.',
           buttons: ['Cancel', 'Open Modal', 'Delete'],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertConfirm() {
-      return this.$ionic.alertController
+    async presentAlertConfirm() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Confirm!',
@@ -59,12 +61,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertPrompt() {
-      return this.$ionic.alertController
+    async presentAlertPrompt() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Prompt!',
@@ -133,12 +135,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertRadio() {
-      return this.$ionic.alertController
+    async presentAlertRadio() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Radio',
@@ -191,12 +193,12 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
 
-    presentAlertCheckbox() {
-      return this.$ionic.alertController
+    async presentAlertCheckbox() {
+      const alert = await alertController
         .create({
           cssClass: 'my-custom-class',
           header: 'Checkbox',
@@ -254,10 +256,10 @@ export default {
               },
             },
           ],
-        })
-        .then(a => a.present())
+        });
+      return alert.present();
     },
   },
-}
+});
 </script>
 ```
diff --git a/core/src/components/avatar/readme.md b/core/src/components/avatar/readme.md
index 67403f0f96..a2cea53c00 100644
--- a/core/src/components/avatar/readme.md
+++ b/core/src/components/avatar/readme.md
@@ -120,6 +120,15 @@ export class AvatarExample {
     <ion-label>Item Avatar</ion-label>
   </ion-item>
 </template>
+
+<script>
+import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonAvatar, IonChip, IonItem, IonLabel }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/avatar/usage/vue.md b/core/src/components/avatar/usage/vue.md
index 9de95d962d..db9c466af5 100644
--- a/core/src/components/avatar/usage/vue.md
+++ b/core/src/components/avatar/usage/vue.md
@@ -18,4 +18,13 @@
     <ion-label>Item Avatar</ion-label>
   </ion-item>
 </template>
+
+<script>
+import { IonAvatar, IonChip, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonAvatar, IonChip, IonItem, IonLabel }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/back-button/readme.md b/core/src/components/back-button/readme.md
index a0b6865bdf..ba55f5174b 100644
--- a/core/src/components/back-button/readme.md
+++ b/core/src/components/back-button/readme.md
@@ -295,6 +295,15 @@ export class BackButtonExample {
     </ion-toolbar>
   </ion-header>
 </template>
+
+<script>
+import { IonButtons, IonHeader, IonMenuButton, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButtons, IonHeader, IonMenuButton, IonToolbar }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/back-button/usage/vue.md b/core/src/components/back-button/usage/vue.md
index 82c487ae1f..8810ee6fbe 100644
--- a/core/src/components/back-button/usage/vue.md
+++ b/core/src/components/back-button/usage/vue.md
@@ -49,4 +49,13 @@
     </ion-toolbar>
   </ion-header>
 </template>
+
+<script>
+import { IonButtons, IonHeader, IonMenuButton, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButtons, IonHeader, IonMenuButton, IonToolbar }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/backdrop/readme.md b/core/src/components/backdrop/readme.md
index 148119157e..6bd5ac8e75 100644
--- a/core/src/components/backdrop/readme.md
+++ b/core/src/components/backdrop/readme.md
@@ -164,15 +164,20 @@ export class BackdropExample {
   </ion-backdrop>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonBackdrop } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    enableBackdropDismiss = false;
-    showBackdrop = false;
-    shouldPropagate = false;
+export default defineComponent({
+  components: { IonBackdrop },
+  setup() {
+    return {
+      enableBackdropDismiss: true,
+      showBackdrop: true,
+      shouldPropagate: true
+    }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/backdrop/usage/vue.md b/core/src/components/backdrop/usage/vue.md
index 6c2488525f..69b836eb57 100644
--- a/core/src/components/backdrop/usage/vue.md
+++ b/core/src/components/backdrop/usage/vue.md
@@ -20,14 +20,19 @@
   </ion-backdrop>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonBackdrop } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    enableBackdropDismiss = false;
-    showBackdrop = false;
-    shouldPropagate = false;
+export default defineComponent({
+  components: { IonBackdrop },
+  setup() {
+    return {
+      enableBackdropDismiss: true,
+      showBackdrop: true,
+      shouldPropagate: true
+    }
   }
+});
 </script>
 ```
\ No newline at end of file
diff --git a/core/src/components/badge/readme.md b/core/src/components/badge/readme.md
index e237412343..b0930be0f5 100644
--- a/core/src/components/badge/readme.md
+++ b/core/src/components/badge/readme.md
@@ -130,6 +130,15 @@ export class BadgeExample {
     <ion-badge slot="end">22</ion-badge>
   </ion-item>
 </template>
+
+<script>
+import { IonBadge, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonBadge, IonItem, IonLabel }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/badge/usage/vue.md b/core/src/components/badge/usage/vue.md
index 018e8630bd..70ceddc2c3 100644
--- a/core/src/components/badge/usage/vue.md
+++ b/core/src/components/badge/usage/vue.md
@@ -21,4 +21,13 @@
     <ion-badge slot="end">22</ion-badge>
   </ion-item>
 </template>
+
+<script>
+import { IonBadge, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonBadge, IonItem, IonLabel }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/button/readme.md b/core/src/components/button/readme.md
index d5572dde69..772704f3d9 100644
--- a/core/src/components/button/readme.md
+++ b/core/src/components/button/readme.md
@@ -274,6 +274,15 @@ export class ButtonExample {
   <ion-button>Default</ion-button>
   <ion-button size="small">Small</ion-button>
 </template>
+
+<script>
+import { IonButton } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/button/usage/vue.md b/core/src/components/button/usage/vue.md
index 4d7f55f453..b72a42d08a 100644
--- a/core/src/components/button/usage/vue.md
+++ b/core/src/components/button/usage/vue.md
@@ -49,4 +49,13 @@
   <ion-button>Default</ion-button>
   <ion-button size="small">Small</ion-button>
 </template>
+
+<script>
+import { IonButton } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonButton }
+});
+</script>
 ```
diff --git a/core/src/components/buttons/readme.md b/core/src/components/buttons/readme.md
index 61151e9d2f..3956015b23 100644
--- a/core/src/components/buttons/readme.md
+++ b/core/src/components/buttons/readme.md
@@ -260,10 +260,10 @@ export class ButtonsExample {
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
       </ion-button>
       <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -295,6 +295,22 @@ export class ButtonsExample {
     <ion-title>Collapsible Buttons</ion-title>
   </ion-toolbar>
 </template>
+
+<script>
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
+import { personCircle, search } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
+  setup() {
+    const clickedStar = () => {
+      console.log('Star clicked!');
+    }
+    return { personCircle, search, clickedStar };
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/buttons/usage/vue.md b/core/src/components/buttons/usage/vue.md
index 060fbd2b67..388007d785 100644
--- a/core/src/components/buttons/usage/vue.md
+++ b/core/src/components/buttons/usage/vue.md
@@ -10,10 +10,10 @@
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
       </ion-button>
       <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -45,4 +45,20 @@
     <ion-title>Collapsible Buttons</ion-title>
   </ion-toolbar>
 </template>
+
+<script>
+import { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar } from '@ionic/vue';
+import { personCircle, search } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonBackButton, IonButton, IonButtons, IonIcon, IonMenuButton, IonTitle, IonToolbar },
+  setup() {
+    const clickedStar = () => {
+      console.log('Star clicked!');
+    }
+    return { personCircle, search, clickedStar };
+  }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/card/readme.md b/core/src/components/card/readme.md
index 14964e8efd..eefad665f4 100644
--- a/core/src/components/card/readme.md
+++ b/core/src/components/card/readme.md
@@ -215,7 +215,7 @@ export class CardExample {
 
   <ion-card>
     <ion-item>
-      <ion-icon name="pin" slot="start"></ion-icon>
+      <ion-icon :icon="pin" slot="start"></ion-icon>
       <ion-label>ion-item in a card, icon left, button right</ion-label>
       <ion-button fill="outline" slot="end">View</ion-button>
     </ion-item>
@@ -228,26 +228,39 @@ export class CardExample {
 
   <ion-card>
     <ion-item href="#" class="ion-activated">
-      <ion-icon name="wifi" slot="start"></ion-icon>
+      <ion-icon :icon="wifi" slot="start"></ion-icon>
       <ion-label>Card Link Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item href="#">
-      <ion-icon name="wine" slot="start"></ion-icon>
+      <ion-icon :icon="wine" slot="start"></ion-icon>
       <ion-label>Card Link Item 2</ion-label>
     </ion-item>
 
     <ion-item class="ion-activated">
-      <ion-icon name="warning" slot="start"></ion-icon>
+      <ion-icon :icon="warning" slot="start"></ion-icon>
       <ion-label>Card Button Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item>
-      <ion-icon name="walk" slot="start"></ion-icon>
+      <ion-icon :icon="walk" slot="start"></ion-icon>
       <ion-label>Card Button Item 2</ion-label>
     </ion-item>
   </ion-card>
 </template>
+
+<script>
+import { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel } from '@ionic/vue';
+import { pin, walk, warning, wifi, wine } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel }
+  setup() {
+    return { warning };
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/card/usage/vue.md b/core/src/components/card/usage/vue.md
index 0e5aa1575b..b4afcba205 100644
--- a/core/src/components/card/usage/vue.md
+++ b/core/src/components/card/usage/vue.md
@@ -14,7 +14,7 @@
 
   <ion-card>
     <ion-item>
-      <ion-icon name="pin" slot="start"></ion-icon>
+      <ion-icon :icon="pin" slot="start"></ion-icon>
       <ion-label>ion-item in a card, icon left, button right</ion-label>
       <ion-button fill="outline" slot="end">View</ion-button>
     </ion-item>
@@ -27,24 +27,37 @@
 
   <ion-card>
     <ion-item href="#" class="ion-activated">
-      <ion-icon name="wifi" slot="start"></ion-icon>
+      <ion-icon :icon="wifi" slot="start"></ion-icon>
       <ion-label>Card Link Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item href="#">
-      <ion-icon name="wine" slot="start"></ion-icon>
+      <ion-icon :icon="wine" slot="start"></ion-icon>
       <ion-label>Card Link Item 2</ion-label>
     </ion-item>
 
     <ion-item class="ion-activated">
-      <ion-icon name="warning" slot="start"></ion-icon>
+      <ion-icon :icon="warning" slot="start"></ion-icon>
       <ion-label>Card Button Item 1 activated</ion-label>
     </ion-item>
 
     <ion-item>
-      <ion-icon name="walk" slot="start"></ion-icon>
+      <ion-icon :icon="walk" slot="start"></ion-icon>
       <ion-label>Card Button Item 2</ion-label>
     </ion-item>
   </ion-card>
 </template>
+
+<script>
+import { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel } from '@ionic/vue';
+import { pin, walk, warning, wifi, wine } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonCard, IonCardContent, IonCardSubtitle, IonCardTitle, IonIcon, IonItem, IonLabel }
+  setup() {
+    return { warning };
+  }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/checkbox/readme.md b/core/src/components/checkbox/readme.md
index 0f77bde855..cf65d42879 100644
--- a/core/src/components/checkbox/readme.md
+++ b/core/src/components/checkbox/readme.md
@@ -235,17 +235,22 @@ export class CheckboxExample {
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonCheckbox, IonItem, IonLabel, IonList } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    form = [
+export default defineComponent({
+  components: { IonCheckbox, IonItem, IonLabel, IonList },
+  setup() {
+    const form = [
       { val: 'Pepperoni', isChecked: true },
       { val: 'Sausage', isChecked: false },
       { val: 'Mushroom', isChecked: false }
     ];
+    
+    return { form };
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/checkbox/usage/vue.md b/core/src/components/checkbox/usage/vue.md
index 84e3cbe4bd..18cb2139f2 100644
--- a/core/src/components/checkbox/usage/vue.md
+++ b/core/src/components/checkbox/usage/vue.md
@@ -29,16 +29,21 @@
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonCheckbox, IonItem, IonLabel, IonList } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    form = [
+export default defineComponent({
+  components: { IonCheckbox, IonItem, IonLabel, IonList },
+  setup() {
+    const form = [
       { val: 'Pepperoni', isChecked: true },
       { val: 'Sausage', isChecked: false },
       { val: 'Mushroom', isChecked: false }
     ];
+    
+    return { form };
   }
+});
 </script>
 ```
\ No newline at end of file
diff --git a/core/src/components/chip/readme.md b/core/src/components/chip/readme.md
index dad437e1d1..e260406a5e 100644
--- a/core/src/components/chip/readme.md
+++ b/core/src/components/chip/readme.md
@@ -192,24 +192,24 @@ export class ChipExample {
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="pin"></ion-icon>
+    <ion-icon :icon="pin"></ion-icon>
     <ion-label>Default</ion-label>
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-icon :icon="heart" color="dark"></ion-icon>
     <ion-label>Default</ion-label>
   </ion-chip>
 
   <ion-chip>
     <ion-label>Button Chip</ion-label>
-    <ion-icon name="close-circle"></ion-icon>
+    <ion-icon :icon="closeCircle"></ion-icon>
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="pin" color="primary"></ion-icon>
+    <ion-icon :icon="pin" color="primary"></ion-icon>
     <ion-label>Icon Chip</ion-label>
-    <ion-icon name="close"></ion-icon>
+    <ion-icon :icon="close"></ion-icon>
   </ion-chip>
 
   <ion-chip>
@@ -217,9 +217,23 @@ export class ChipExample {
       <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
     </ion-avatar>
     <ion-label>Avatar Chip</ion-label>
-    <ion-icon name="close-circle"></ion-icon>
+    <ion-icon :icon="closeCircle"></ion-icon>
   </ion-chip>
 </template>
+
+<script>
+import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/vue';
+import { close, closeCircle, heart, pin } from 'ionicons/icons';
+
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonAvatar, IonChip, IonIcon, IonLabel },
+  setup() {
+    return { close, closeCircle, heart, pin }
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/chip/usage/vue.md b/core/src/components/chip/usage/vue.md
index f670b2d791..ed906aa3c4 100644
--- a/core/src/components/chip/usage/vue.md
+++ b/core/src/components/chip/usage/vue.md
@@ -13,24 +13,24 @@
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="pin"></ion-icon>
+    <ion-icon :icon="pin"></ion-icon>
     <ion-label>Default</ion-label>
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="heart" color="dark"></ion-icon>
+    <ion-icon :icon="heart" color="dark"></ion-icon>
     <ion-label>Default</ion-label>
   </ion-chip>
 
   <ion-chip>
     <ion-label>Button Chip</ion-label>
-    <ion-icon name="close-circle"></ion-icon>
+    <ion-icon :icon="closeCircle"></ion-icon>
   </ion-chip>
 
   <ion-chip>
-    <ion-icon name="pin" color="primary"></ion-icon>
+    <ion-icon :icon="pin" color="primary"></ion-icon>
     <ion-label>Icon Chip</ion-label>
-    <ion-icon name="close"></ion-icon>
+    <ion-icon :icon="close"></ion-icon>
   </ion-chip>
 
   <ion-chip>
@@ -38,7 +38,21 @@
       <img src="https://gravatar.com/avatar/dba6bae8c566f9d4041fb9cd9ada7741?d=identicon&f=y">
     </ion-avatar>
     <ion-label>Avatar Chip</ion-label>
-    <ion-icon name="close-circle"></ion-icon>
+    <ion-icon :icon="closeCircle"></ion-icon>
   </ion-chip>
 </template>
+
+<script>
+import { IonAvatar, IonChip, IonIcon, IonLabel } from '@ionic/vue';
+import { close, closeCircle, heart, pin } from 'ionicons/icons';
+
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonAvatar, IonChip, IonIcon, IonLabel },
+  setup() {
+    return { close, closeCircle, heart, pin }
+  }
+});
+</script>
 ```
diff --git a/core/src/components/content/readme.md b/core/src/components/content/readme.md
index ef9b62bc62..152eba169e 100644
--- a/core/src/components/content/readme.md
+++ b/core/src/components/content/readme.md
@@ -123,7 +123,7 @@ export class ContentExample {
 ```html
 <template>
   <ion-content
-    :scrollEvents="true"
+    :scroll-events="true"
     @ionScrollStart="logScrollStart()"
     @ionScroll="logScrolling($event)"
     @ionScrollEnd="logScrollEnd()">
@@ -134,6 +134,16 @@ export class ContentExample {
       </div>
   </ion-content>
 </template>
+
+<script>
+import { IonContent } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent }
+});
+</script>
+
 ```
 
 
diff --git a/core/src/components/content/usage/vue.md b/core/src/components/content/usage/vue.md
index 5d4a934416..5c7bb00a1b 100644
--- a/core/src/components/content/usage/vue.md
+++ b/core/src/components/content/usage/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <ion-content
-    :scrollEvents="true"
+    :scroll-events="true"
     @ionScrollStart="logScrollStart()"
     @ionScroll="logScrolling($event)"
     @ionScrollEnd="logScrollEnd()">
@@ -12,5 +12,15 @@
       </div>
   </ion-content>
 </template>
+
+<script>
+import { IonContent } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent }
+});
+</script>
+
 ```
 
diff --git a/core/src/components/datetime/readme.md b/core/src/components/datetime/readme.md
index a9a02c37d8..f1aec243be 100644
--- a/core/src/components/datetime/readme.md
+++ b/core/src/components/datetime/readme.md
@@ -748,14 +748,15 @@ export class DatetimeExample {
   </ion-item>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonDatetime, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
-
-    customDayShortNames = [
+export default defineComponent({
+  components: { IonDatetime, IonItem, IonLabel },
+  setup() {
+    const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
+    const customDayShortNames = [
       's\u00f8n',
       'man',
       'tir',
@@ -764,8 +765,7 @@ export class DatetimeExample {
       'fre',
       'l\u00f8r'
     ];
-
-    customPickerOptions = {
+    const customPickerOptions = {
       buttons: [{
         text: 'Save',
         handler: () => console.log('Clicked Save!')
@@ -777,7 +777,14 @@ export class DatetimeExample {
         }
       }]
     }
+    
+    return {
+      customYearValues,
+      customDayShortNames,
+      customPickerOptions
+    }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/datetime/usage/vue.md b/core/src/components/datetime/usage/vue.md
index 6d5c6730b1..e66fb6b96f 100644
--- a/core/src/components/datetime/usage/vue.md
+++ b/core/src/components/datetime/usage/vue.md
@@ -79,14 +79,15 @@
   </ion-item>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonDatetime, IonItem, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
-
-    customDayShortNames = [
+export default defineComponent({
+  components: { IonDatetime, IonItem, IonLabel },
+  setup() {
+    const customYearValues = [2020, 2016, 2008, 2004, 2000, 1996];
+    const customDayShortNames = [
       's\u00f8n',
       'man',
       'tir',
@@ -95,8 +96,7 @@
       'fre',
       'l\u00f8r'
     ];
-
-    customPickerOptions = {
+    const customPickerOptions = {
       buttons: [{
         text: 'Save',
         handler: () => console.log('Clicked Save!')
@@ -108,6 +108,13 @@
         }
       }]
     }
+    
+    return {
+      customYearValues,
+      customDayShortNames,
+      customPickerOptions
+    }
   }
+});
 </script>
 ```
\ No newline at end of file
diff --git a/core/src/components/fab-button/readme.md b/core/src/components/fab-button/readme.md
index be86ac94f0..9ad8439636 100644
--- a/core/src/components/fab-button/readme.md
+++ b/core/src/components/fab-button/readme.md
@@ -131,6 +131,15 @@ export class FabButtonExample {
 
   </ion-content>
 </template>
+
+<script>
+import { IonContent, IonFab, IonFabButton } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent, IonFab, IonFabButton }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/fab-button/usage/vue.md b/core/src/components/fab-button/usage/vue.md
index 6e1c520151..6a3b738b78 100644
--- a/core/src/components/fab-button/usage/vue.md
+++ b/core/src/components/fab-button/usage/vue.md
@@ -22,4 +22,13 @@
 
   </ion-content>
 </template>
+
+<script>
+import { IonContent, IonFab, IonFabButton } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent, IonFab, IonFabButton }
+});
+</script>
 ```
diff --git a/core/src/components/fab-list/readme.md b/core/src/components/fab-list/readme.md
index 3a7693b713..8a567a1094 100644
--- a/core/src/components/fab-list/readme.md
+++ b/core/src/components/fab-list/readme.md
@@ -215,6 +215,15 @@ export class FabListExample {
 
   </ion-fab>
 </template>
+
+<script>
+import { IonFab, IonFabButton, IonFabList } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonFab, IonFabButton, IonFabList }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/fab-list/usage/vue.md b/core/src/components/fab-list/usage/vue.md
index b8bdfbf97d..656644d6b8 100644
--- a/core/src/components/fab-list/usage/vue.md
+++ b/core/src/components/fab-list/usage/vue.md
@@ -15,4 +15,13 @@
 
   </ion-fab>
 </template>
+
+<script>
+import { IonFab, IonFabButton, IonFabList } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonFab, IonFabButton, IonFabList }
+});
+</script>
 ```
diff --git a/core/src/components/fab/readme.md b/core/src/components/fab/readme.md
index 047ab1a818..2031853bef 100644
--- a/core/src/components/fab/readme.md
+++ b/core/src/components/fab/readme.md
@@ -416,6 +416,61 @@ export class FabExample {
     </ion-toolbar>
   </ion-footer>
 </template>
+
+<script>
+import { 
+  IonContent, 
+  IonFab, 
+  IonFabButton, 
+  IonFabList, 
+  IonFooter, 
+  IonHeader, 
+  IonIcon, 
+  IonTitle, 
+  IonToolbar 
+} from '@ionic/vue';
+import { 
+  add, 
+  arrowBackCircle,
+  arrowForwardCircle, 
+  logoFacebook, 
+  logoInstagram, 
+  logoTwitter, 
+  logoVimeo, 
+  person, 
+  settings, 
+  share
+} from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonContent, 
+    IonFab, 
+    IonFabButton, 
+    IonFabList, 
+    IonFooter, 
+    IonHeader, 
+    IonIcon, 
+    IonTitle, 
+    IonToolbar
+  },
+  setup() {
+    return {
+      add, 
+      arrowBackCircle,
+      arrowForwardCircle, 
+      logoFacebook, 
+      logoInstagram, 
+      logoTwitter, 
+      logoVimeo, 
+      person, 
+      settings, 
+      share
+    }
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/fab/usage/vue.md b/core/src/components/fab/usage/vue.md
index dba0f9af7e..8e5c3a1ea5 100644
--- a/core/src/components/fab/usage/vue.md
+++ b/core/src/components/fab/usage/vue.md
@@ -92,4 +92,59 @@
     </ion-toolbar>
   </ion-footer>
 </template>
+
+<script>
+import { 
+  IonContent, 
+  IonFab, 
+  IonFabButton, 
+  IonFabList, 
+  IonFooter, 
+  IonHeader, 
+  IonIcon, 
+  IonTitle, 
+  IonToolbar 
+} from '@ionic/vue';
+import { 
+  add, 
+  arrowBackCircle,
+  arrowForwardCircle, 
+  logoFacebook, 
+  logoInstagram, 
+  logoTwitter, 
+  logoVimeo, 
+  person, 
+  settings, 
+  share
+} from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonContent, 
+    IonFab, 
+    IonFabButton, 
+    IonFabList, 
+    IonFooter, 
+    IonHeader, 
+    IonIcon, 
+    IonTitle, 
+    IonToolbar
+  },
+  setup() {
+    return {
+      add, 
+      arrowBackCircle,
+      arrowForwardCircle, 
+      logoFacebook, 
+      logoInstagram, 
+      logoTwitter, 
+      logoVimeo, 
+      person, 
+      settings, 
+      share
+    }
+  }
+});
+</script>
 ```
diff --git a/core/src/components/footer/readme.md b/core/src/components/footer/readme.md
index c87a16f280..d94dfdb2aa 100644
--- a/core/src/components/footer/readme.md
+++ b/core/src/components/footer/readme.md
@@ -106,6 +106,15 @@ export class FooterExample {
     </ion-toolbar>
   </ion-footer>
 </template>
+
+<script>
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent, IonFooter, IonTitle, IonToolbar }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/footer/usage/vue.md b/core/src/components/footer/usage/vue.md
index 9bb5dcb3ac..903749618d 100644
--- a/core/src/components/footer/usage/vue.md
+++ b/core/src/components/footer/usage/vue.md
@@ -15,4 +15,13 @@
     </ion-toolbar>
   </ion-footer>
 </template>
+
+<script>
+import { IonContent, IonFooter, IonTitle, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonContent, IonFooter, IonTitle, IonToolbar }
+});
+</script>
 ```
diff --git a/core/src/components/grid/readme.md b/core/src/components/grid/readme.md
index 1c7f87924c..00141941fb 100644
--- a/core/src/components/grid/readme.md
+++ b/core/src/components/grid/readme.md
@@ -714,6 +714,15 @@ export class GridExample {
     </ion-row>
   </ion-grid>
 </template>
+
+<script>
+import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonCol, IonGrid, IonRow }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/grid/usage/vue.md b/core/src/components/grid/usage/vue.md
index c52b259805..5f5cb84748 100644
--- a/core/src/components/grid/usage/vue.md
+++ b/core/src/components/grid/usage/vue.md
@@ -178,4 +178,13 @@
     </ion-row>
   </ion-grid>
 </template>
+
+<script>
+import { IonCol, IonGrid, IonRow } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonCol, IonGrid, IonRow }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/header/readme.md b/core/src/components/header/readme.md
index ef87fbc0a7..7465e97bc0 100644
--- a/core/src/components/header/readme.md
+++ b/core/src/components/header/readme.md
@@ -160,6 +160,29 @@ export class HeaderExample {
     </ion-header>
   </ion-content>
 </template>
+
+<script>
+import { 
+  IonBackButton, 
+  IonButtons, 
+  IonContent, 
+  IonHeader, 
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonBackButton, 
+    IonButtons, 
+    IonContent, 
+    IonHeader, 
+    IonTitle, 
+    IonToolbar
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/header/usage/vue.md b/core/src/components/header/usage/vue.md
index ad1fa4ae06..9b3dd5d42c 100644
--- a/core/src/components/header/usage/vue.md
+++ b/core/src/components/header/usage/vue.md
@@ -28,4 +28,27 @@
     </ion-header>
   </ion-content>
 </template>
+
+<script>
+import { 
+  IonBackButton, 
+  IonButtons, 
+  IonContent, 
+  IonHeader, 
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonBackButton, 
+    IonButtons, 
+    IonContent, 
+    IonHeader, 
+    IonTitle, 
+    IonToolbar
+  }
+});
+</script>
 ```
diff --git a/core/src/components/icon/usage/vue.md b/core/src/components/icon/usage/vue.md
index c009083b38..99be20887e 100644
--- a/core/src/components/icon/usage/vue.md
+++ b/core/src/components/icon/usage/vue.md
@@ -1,16 +1,29 @@
 ```html
 <template>
   <!-- uses "star" icon for both modes -->
-  <ion-icon name="star"></ion-icon>
+  <ion-icon :icon="star"></ion-icon>
 
   <!-- explicitly set the icon for each mode -->
-  <ion-icon ios="home" md="star"></ion-icon>
+  <ion-icon :ios="home" :md="star"></ion-icon>
 
   <!-- use a custom svg icon -->
   <ion-icon src="/path/to/external/file.svg"></ion-icon>
 
   <!-- set the icon size -->
-  <ion-icon size="small" name="heart"></ion-icon>
-  <ion-icon size="large" name="heart"></ion-icon>
+  <ion-icon size="small" :icon="heart"></ion-icon>
+  <ion-icon size="large" :icon="heart"></ion-icon>
 </template>
+
+<script>
+import { IonIcon } from '@ionic/vue';
+import { heart, home, star } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonIcon },
+  setup() {
+    return { heart, home, star }
+  }
+});
+</script>
 ```
diff --git a/core/src/components/img/readme.md b/core/src/components/img/readme.md
index 26be240884..e41584a3d0 100644
--- a/core/src/components/img/readme.md
+++ b/core/src/components/img/readme.md
@@ -103,6 +103,28 @@ export class ImgExample {
     </ion-item>
   </ion-list>
 </template>
+
+<script>
+import { IonImg, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonImg, IonItem, IonLabel, IonList, IonThumbnail },
+  setup() {
+    const items = [{
+      'text': 'Item 1',
+      'src': '/path/to/external/file.png'
+    }, {
+      'text': 'Item 2',
+      'src': '/path/to/external/file.png'
+    }, {
+      'text': 'Item 3',
+      'src': '/path/to/external/file.png'
+    }];
+    return { items }
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/img/usage/vue.md b/core/src/components/img/usage/vue.md
index 2bf18bbca6..9f20209c37 100644
--- a/core/src/components/img/usage/vue.md
+++ b/core/src/components/img/usage/vue.md
@@ -9,4 +9,26 @@
     </ion-item>
   </ion-list>
 </template>
+
+<script>
+import { IonImg, IonItem, IonLabel, IonList, IonThumbnail } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonImg, IonItem, IonLabel, IonList, IonThumbnail },
+  setup() {
+    const items = [{
+      'text': 'Item 1',
+      'src': '/path/to/external/file.png'
+    }, {
+      'text': 'Item 2',
+      'src': '/path/to/external/file.png'
+    }, {
+      'text': 'Item 3',
+      'src': '/path/to/external/file.png'
+    }];
+    return { items }
+  }
+});
+</script>
 ```
diff --git a/core/src/components/input/readme.md b/core/src/components/input/readme.md
index b54fb9d80a..9fec64e6d5 100644
--- a/core/src/components/input/readme.md
+++ b/core/src/components/input/readme.md
@@ -283,6 +283,15 @@ export class InputExample {
     <ion-input></ion-input>
   </ion-item>
 </template>
+
+<script>
+import { IonLabel, IonInput, IonItem } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonLabel, IonInput, IonItem }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/input/usage/vue.md b/core/src/components/input/usage/vue.md
index c423a8563d..c802aa75e1 100644
--- a/core/src/components/input/usage/vue.md
+++ b/core/src/components/input/usage/vue.md
@@ -42,4 +42,13 @@
     <ion-input></ion-input>
   </ion-item>
 </template>
+
+<script>
+import { IonLabel, IonInput, IonItem } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonLabel, IonInput, IonItem }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/item-divider/readme.md b/core/src/components/item-divider/readme.md
index 1ec6eab96b..d911137489 100644
--- a/core/src/components/item-divider/readme.md
+++ b/core/src/components/item-divider/readme.md
@@ -201,6 +201,15 @@ export class ItemDividerExample {
     <ion-item><ion-label>B5</ion-label></ion-item>
   </ion-list>
 </template>
+
+<script>
+import { IonItem, IonItemDivider, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonItemDivider, IonLabel }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/item-divider/usage/vue.md b/core/src/components/item-divider/usage/vue.md
index 03a1a2e2f4..de4013afa0 100644
--- a/core/src/components/item-divider/usage/vue.md
+++ b/core/src/components/item-divider/usage/vue.md
@@ -39,4 +39,13 @@
     <ion-item><ion-label>B5</ion-label></ion-item>
   </ion-list>
 </template>
+
+<script>
+import { IonItem, IonItemDivider, IonLabel } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonItemDivider, IonLabel }
+});
+</script>
 ```
diff --git a/core/src/components/item-group/readme.md b/core/src/components/item-group/readme.md
index d3c27f2e64..7d4eb32e62 100644
--- a/core/src/components/item-group/readme.md
+++ b/core/src/components/item-group/readme.md
@@ -459,6 +459,30 @@ export class ItemGroupExample {
     </ion-item-sliding>
   </ion-item-group>
 </template>
+<script>
+import { 
+  IonItem, 
+  IonItemDivider,
+  IonItemGroup, 
+  IonItemOption, 
+  IonItemOptions, 
+  IonItemSliding, 
+  IonLabel
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonItem,
+    IonItemDivider, 
+    IonItemGroup, 
+    IonItemOption, 
+    IonItemOptions, 
+    IonItemSliding, 
+    IonLabel
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/item-group/usage/vue.md b/core/src/components/item-group/usage/vue.md
index bd00f5538b..d831e47e73 100644
--- a/core/src/components/item-group/usage/vue.md
+++ b/core/src/components/item-group/usage/vue.md
@@ -102,4 +102,28 @@
     </ion-item-sliding>
   </ion-item-group>
 </template>
+<script>
+import { 
+  IonItem, 
+  IonItemDivider,
+  IonItemGroup, 
+  IonItemOption, 
+  IonItemOptions, 
+  IonItemSliding, 
+  IonLabel
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonItem,
+    IonItemDivider, 
+    IonItemGroup, 
+    IonItemOption, 
+    IonItemOptions, 
+    IonItemSliding, 
+    IonLabel
+  }
+});
+</script>
 ```
diff --git a/core/src/components/item-sliding/readme.md b/core/src/components/item-sliding/readme.md
index d5356c5498..d19d8b671f 100644
--- a/core/src/components/item-sliding/readme.md
+++ b/core/src/components/item-sliding/readme.md
@@ -705,16 +705,16 @@ export class ItemSlidingExample {
 
       <ion-item-options side="start">
         <ion-item-option>
-          <ion-icon slot="icon-only" name="heart"></ion-icon>
+          <ion-icon slot="icon-only" :icon="heart"></ion-icon>
         </ion-item-option>
       </ion-item-options>
 
       <ion-item-options side="end">
         <ion-item-option color="danger">
-          <ion-icon slot="icon-only" name="trash"></ion-icon>
+          <ion-icon slot="icon-only" :icon="trash"></ion-icon>
         </ion-item-option>
         <ion-item-option>
-          <ion-icon slot="icon-only" name="star"></ion-icon>
+          <ion-icon slot="icon-only" :icon="star"></ion-icon>
         </ion-item-option>
       </ion-item-options>
     </ion-item-sliding>
@@ -728,11 +728,11 @@ export class ItemSlidingExample {
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="start" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
-          <ion-icon slot="start" name="archive"></ion-icon>
+          <ion-icon slot="start" :icon="archive"></ion-icon>
           Archive
         </ion-item-option>
       </ion-item-options>
@@ -747,11 +747,11 @@ export class ItemSlidingExample {
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="end" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
-          <ion-icon slot="end" name="archive"></ion-icon>
+          <ion-icon slot="end" :icon="archive"></ion-icon>
           Archive
         </ion-item-option>
       </ion-item-options>
@@ -766,11 +766,11 @@ export class ItemSlidingExample {
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="top" :ios="ellipsis-horizontal" :md="ellipsis-vertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
-          <ion-icon slot="top" name="archive"></ion-icon>
+          <ion-icon slot="top" :icon="archive"></ion-icon>
           Archive
         </ion-item-option>
       </ion-item-options>
@@ -785,17 +785,60 @@ export class ItemSlidingExample {
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="bottom" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
-          <ion-icon slot="bottom" name="archive"></ion-icon>
+          <ion-icon slot="bottom" :icon="archive"></ion-icon>
           Archive
         </ion-item-option>
       </ion-item-options>
     </ion-item-sliding>
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonIcon, 
+  IonItem, 
+  IonItemOption, 
+  IonItemOptions, 
+  IonItemSliding, 
+  IonLabel, 
+  IonList
+} from '@ionic/vue';
+import { 
+  archive, 
+  ellipsisHorizontal, 
+  ellipsisVertical,
+  heart, 
+  star, 
+  trash
+} from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonIcon, 
+    IonItem, 
+    IonItemOption, 
+    IonItemOptions, 
+    IonItemSliding, 
+    IonLabel, 
+    IonList
+  },
+  setup() {
+    return {
+      archive, 
+      ellipsisHorizontal, 
+      ellipsisVertical,
+      heart, 
+      star, 
+      trash
+    }
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/item-sliding/usage/vue.md b/core/src/components/item-sliding/usage/vue.md
index 9fb7b5ff08..181d2f8952 100644
--- a/core/src/components/item-sliding/usage/vue.md
+++ b/core/src/components/item-sliding/usage/vue.md
@@ -51,16 +51,16 @@
 
       <ion-item-options side="start">
         <ion-item-option>
-          <ion-icon slot="icon-only" name="heart"></ion-icon>
+          <ion-icon slot="icon-only" :icon="heart"></ion-icon>
         </ion-item-option>
       </ion-item-options>
 
       <ion-item-options side="end">
         <ion-item-option color="danger">
-          <ion-icon slot="icon-only" name="trash"></ion-icon>
+          <ion-icon slot="icon-only" :icon="trash"></ion-icon>
         </ion-item-option>
         <ion-item-option>
-          <ion-icon slot="icon-only" name="star"></ion-icon>
+          <ion-icon slot="icon-only" :icon="star"></ion-icon>
         </ion-item-option>
       </ion-item-options>
     </ion-item-sliding>
@@ -74,11 +74,11 @@
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="start" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="start" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
-          <ion-icon slot="start" name="archive"></ion-icon>
+          <ion-icon slot="start" :icon="archive"></ion-icon>
           Archive
         </ion-item-option>
       </ion-item-options>
@@ -93,11 +93,11 @@
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="end" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="end" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
-          <ion-icon slot="end" name="archive"></ion-icon>
+          <ion-icon slot="end" :icon="archive"></ion-icon>
           Archive
         </ion-item-option>
       </ion-item-options>
@@ -112,11 +112,11 @@
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="top" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="top" :ios="ellipsis-horizontal" :md="ellipsis-vertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
-          <ion-icon slot="top" name="archive"></ion-icon>
+          <ion-icon slot="top" :icon="archive"></ion-icon>
           Archive
         </ion-item-option>
       </ion-item-options>
@@ -131,15 +131,58 @@
       </ion-item>
       <ion-item-options>
         <ion-item-option color="primary">
-          <ion-icon slot="bottom" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+          <ion-icon slot="bottom" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
           More
         </ion-item-option>
         <ion-item-option color="secondary">
-          <ion-icon slot="bottom" name="archive"></ion-icon>
+          <ion-icon slot="bottom" :icon="archive"></ion-icon>
           Archive
         </ion-item-option>
       </ion-item-options>
     </ion-item-sliding>
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonIcon, 
+  IonItem, 
+  IonItemOption, 
+  IonItemOptions, 
+  IonItemSliding, 
+  IonLabel, 
+  IonList
+} from '@ionic/vue';
+import { 
+  archive, 
+  ellipsisHorizontal, 
+  ellipsisVertical,
+  heart, 
+  star, 
+  trash
+} from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonIcon, 
+    IonItem, 
+    IonItemOption, 
+    IonItemOptions, 
+    IonItemSliding, 
+    IonLabel, 
+    IonList
+  },
+  setup() {
+    return {
+      archive, 
+      ellipsisHorizontal, 
+      ellipsisVertical,
+      heart, 
+      star, 
+      trash
+    }
+  }
+});
+</script>
 ```
diff --git a/core/src/components/item/readme.md b/core/src/components/item/readme.md
index 5d0fbd0b51..3d626c448f 100644
--- a/core/src/components/item/readme.md
+++ b/core/src/components/item/readme.md
@@ -1645,7 +1645,7 @@ export class ItemExample {
       <h3>H3 Title Text</h3>
       <p>Icon on right</p>
     </ion-label>
-    <ion-icon name="close-circle" slot="end"></ion-icon>
+    <ion-icon :icon="closeCircle" slot="end"></ion-icon>
   </ion-item>
 </template>
 ```
@@ -1667,22 +1667,22 @@ export class ItemExample {
   <ion-item>
     <ion-button slot="start">
       Start Icon
-      <ion-icon name="home" slot="end"></ion-icon>
+      <ion-icon :icon="home" slot="end"></ion-icon>
     </ion-button>
     <ion-label>Buttons with Icons</ion-label>
     <ion-button slot="end">
-      <ion-icon name="star" slot="end"></ion-icon>
+      <ion-icon :icon="star" slot="end"></ion-icon>
       End Icon
     </ion-button>
   </ion-item>
 
   <ion-item>
     <ion-button slot="start">
-      <ion-icon slot="icon-only" name="navigate"></ion-icon>
+      <ion-icon slot="icon-only" :icon="navigate"></ion-icon>
     </ion-button>
     <ion-label>Icon only Buttons</ion-label>
     <ion-button slot="end">
-      <ion-icon slot="icon-only" name="star"></ion-icon>
+      <ion-icon slot="icon-only" :icon="star"></ion-icon>
     </ion-button>
   </ion-item>
 </template>
@@ -1696,25 +1696,25 @@ export class ItemExample {
     <ion-label>
       Icon End
     </ion-label>
-    <ion-icon name="information-circle" slot="end"></ion-icon>
+    <ion-icon :icon="informationCircle" slot="end"></ion-icon>
   </ion-item>
 
   <ion-item>
     <ion-label>
       Large Icon End
     </ion-label>
-    <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+    <ion-icon :icon="informationCircle" size="large" slot="end"></ion-icon>
   </ion-item>
 
   <ion-item>
     <ion-label>
       Small Icon End
     </ion-label>
-    <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+    <ion-icon :icon="informationCircle" size="small" slot="end"></ion-icon>
   </ion-item>
 
   <ion-item>
-    <ion-icon name="star" slot="start"></ion-icon>
+    <ion-icon :icon="star" slot="start"></ion-icon>
     <ion-label>
       Icon Start
     </ion-label>
@@ -1724,8 +1724,8 @@ export class ItemExample {
     <ion-label>
       Two Icons End
     </ion-label>
-    <ion-icon name="checkmark-circle" slot="end"></ion-icon>
-    <ion-icon name="shuffle" slot="end"></ion-icon>
+    <ion-icon :icon="checkmarkCircle" slot="end"></ion-icon>
+    <ion-icon :icon="shuffle" slot="end"></ion-icon>
   </ion-item>
 </template>
 ```
@@ -1777,6 +1777,65 @@ export class ItemExample {
     <ion-range></ion-range>
   </ion-item>
 </template>
+
+<script>
+import { 
+  IonAvatar,
+  IonButton,
+  IonCheckbox, 
+  IonDatetime,
+  IonIcon,
+  IonInput, 
+  IonItem, 
+  IonLabel, 
+  IonRange,
+  IonSelect, 
+  IonSelectOption, 
+  IonText,
+  IonThumbnail,
+  IonToggle
+} from '@ionic/vue';
+import { 
+  checkmarkCircle, 
+  closeCircle, 
+  home, 
+  informationCircle, 
+  navigate, 
+  shuffle, 
+  star
+} from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonAvatar,
+    IonButton,
+    IonCheckbox, 
+    IonDatetime,
+    IonIcon,
+    IonInput, 
+    IonItem, 
+    IonLabel, 
+    IonRange,
+    IonSelect, 
+    IonSelectOption, 
+    IonText,
+    IonThumbnail,
+    IonToggle
+  },
+  setup() {
+    return {
+      checkmarkCircle, 
+      closeCircle, 
+      home, 
+      informationCircle, 
+      navigate, 
+      shuffle, 
+      star
+    }
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/item/usage/vue.md b/core/src/components/item/usage/vue.md
index 03ac9dc702..8c7de6c04a 100644
--- a/core/src/components/item/usage/vue.md
+++ b/core/src/components/item/usage/vue.md
@@ -199,7 +199,7 @@
       <h3>H3 Title Text</h3>
       <p>Icon on right</p>
     </ion-label>
-    <ion-icon name="close-circle" slot="end"></ion-icon>
+    <ion-icon :icon="closeCircle" slot="end"></ion-icon>
   </ion-item>
 </template>
 ```
@@ -221,22 +221,22 @@
   <ion-item>
     <ion-button slot="start">
       Start Icon
-      <ion-icon name="home" slot="end"></ion-icon>
+      <ion-icon :icon="home" slot="end"></ion-icon>
     </ion-button>
     <ion-label>Buttons with Icons</ion-label>
     <ion-button slot="end">
-      <ion-icon name="star" slot="end"></ion-icon>
+      <ion-icon :icon="star" slot="end"></ion-icon>
       End Icon
     </ion-button>
   </ion-item>
 
   <ion-item>
     <ion-button slot="start">
-      <ion-icon slot="icon-only" name="navigate"></ion-icon>
+      <ion-icon slot="icon-only" :icon="navigate"></ion-icon>
     </ion-button>
     <ion-label>Icon only Buttons</ion-label>
     <ion-button slot="end">
-      <ion-icon slot="icon-only" name="star"></ion-icon>
+      <ion-icon slot="icon-only" :icon="star"></ion-icon>
     </ion-button>
   </ion-item>
 </template>
@@ -250,25 +250,25 @@
     <ion-label>
       Icon End
     </ion-label>
-    <ion-icon name="information-circle" slot="end"></ion-icon>
+    <ion-icon :icon="informationCircle" slot="end"></ion-icon>
   </ion-item>
 
   <ion-item>
     <ion-label>
       Large Icon End
     </ion-label>
-    <ion-icon name="information-circle" size="large" slot="end"></ion-icon>
+    <ion-icon :icon="informationCircle" size="large" slot="end"></ion-icon>
   </ion-item>
 
   <ion-item>
     <ion-label>
       Small Icon End
     </ion-label>
-    <ion-icon name="information-circle" size="small" slot="end"></ion-icon>
+    <ion-icon :icon="informationCircle" size="small" slot="end"></ion-icon>
   </ion-item>
 
   <ion-item>
-    <ion-icon name="star" slot="start"></ion-icon>
+    <ion-icon :icon="star" slot="start"></ion-icon>
     <ion-label>
       Icon Start
     </ion-label>
@@ -278,8 +278,8 @@
     <ion-label>
       Two Icons End
     </ion-label>
-    <ion-icon name="checkmark-circle" slot="end"></ion-icon>
-    <ion-icon name="shuffle" slot="end"></ion-icon>
+    <ion-icon :icon="checkmarkCircle" slot="end"></ion-icon>
+    <ion-icon :icon="shuffle" slot="end"></ion-icon>
   </ion-item>
 </template>
 ```
@@ -331,4 +331,63 @@
     <ion-range></ion-range>
   </ion-item>
 </template>
+
+<script>
+import { 
+  IonAvatar,
+  IonButton,
+  IonCheckbox, 
+  IonDatetime,
+  IonIcon,
+  IonInput, 
+  IonItem, 
+  IonLabel, 
+  IonRange,
+  IonSelect, 
+  IonSelectOption, 
+  IonText,
+  IonThumbnail,
+  IonToggle
+} from '@ionic/vue';
+import { 
+  checkmarkCircle, 
+  closeCircle, 
+  home, 
+  informationCircle, 
+  navigate, 
+  shuffle, 
+  star
+} from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonAvatar,
+    IonButton,
+    IonCheckbox, 
+    IonDatetime,
+    IonIcon,
+    IonInput, 
+    IonItem, 
+    IonLabel, 
+    IonRange,
+    IonSelect, 
+    IonSelectOption, 
+    IonText,
+    IonThumbnail,
+    IonToggle
+  },
+  setup() {
+    return {
+      checkmarkCircle, 
+      closeCircle, 
+      home, 
+      informationCircle, 
+      navigate, 
+      shuffle, 
+      star
+    }
+  }
+});
+</script>
 ```
diff --git a/core/src/components/label/readme.md b/core/src/components/label/readme.md
index f8e81f906b..8ed38b0ea7 100644
--- a/core/src/components/label/readme.md
+++ b/core/src/components/label/readme.md
@@ -258,6 +258,27 @@ export class LabelExample {
     <ion-label>Checkbox</ion-label>
   </ion-item>
 </template>
+
+<script>
+import { 
+  IonCheckbox, 
+  IonInput, 
+  IonItem, 
+  IonLabel,
+  IonToggle
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonCheckbox, 
+    IonInput, 
+    IonItem, 
+    IonLabel,
+    IonToggle
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/label/usage/vue.md b/core/src/components/label/usage/vue.md
index d04a34980c..4b2b0ee510 100644
--- a/core/src/components/label/usage/vue.md
+++ b/core/src/components/label/usage/vue.md
@@ -53,4 +53,25 @@
     <ion-label>Checkbox</ion-label>
   </ion-item>
 </template>
+
+<script>
+import { 
+  IonCheckbox, 
+  IonInput, 
+  IonItem, 
+  IonLabel,
+  IonToggle
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonCheckbox, 
+    IonInput, 
+    IonItem, 
+    IonLabel,
+    IonToggle
+  }
+});
+</script>
 ```
diff --git a/core/src/components/list-header/readme.md b/core/src/components/list-header/readme.md
index 6b23a0b454..8a4c52483e 100644
--- a/core/src/components/list-header/readme.md
+++ b/core/src/components/list-header/readme.md
@@ -299,6 +299,15 @@ export class ListHeaderExample {
     </ion-item>
   </ion-list>
 </template>
+
+<script>
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonLabel, IonList, IonListHeader }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/list-header/usage/vue.md b/core/src/components/list-header/usage/vue.md
index d4e1386123..d7fbad1fa3 100644
--- a/core/src/components/list-header/usage/vue.md
+++ b/core/src/components/list-header/usage/vue.md
@@ -63,4 +63,13 @@
     </ion-item>
   </ion-list>
 </template>
+
+<script>
+import { IonItem, IonLabel, IonList, IonListHeader } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonLabel, IonList, IonListHeader }
+});
+</script>
 ```
diff --git a/core/src/components/list/readme.md b/core/src/components/list/readme.md
index 11e8ae91d7..f75160e0df 100644
--- a/core/src/components/list/readme.md
+++ b/core/src/components/list/readme.md
@@ -358,6 +358,37 @@ export class ListExample {
     </ion-item-sliding>
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonCheckbox, 
+  IonInput, 
+  IonItem, 
+  IonItemOption, 
+  IonItemOptions, 
+  IonItemSliding, 
+  IonList, 
+  IonLabel, 
+  IonRadio, 
+  IonToggle 
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonCheckbox, 
+    IonInput, 
+    IonItem, 
+    IonItemOption, 
+    IonItemOptions, 
+    IonItemSliding, 
+    IonList, 
+    IonLabel, 
+    IonRadio, 
+    IonToggle 
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/list/usage/vue.md b/core/src/components/list/usage/vue.md
index 55c78a0fd0..eadb80c056 100644
--- a/core/src/components/list/usage/vue.md
+++ b/core/src/components/list/usage/vue.md
@@ -60,4 +60,35 @@
     </ion-item-sliding>
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonCheckbox, 
+  IonInput, 
+  IonItem, 
+  IonItemOption, 
+  IonItemOptions, 
+  IonItemSliding, 
+  IonList, 
+  IonLabel, 
+  IonRadio, 
+  IonToggle 
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonCheckbox, 
+    IonInput, 
+    IonItem, 
+    IonItemOption, 
+    IonItemOptions, 
+    IonItemSliding, 
+    IonList, 
+    IonLabel, 
+    IonRadio, 
+    IonToggle 
+  }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/loading/readme.md b/core/src/components/loading/readme.md
index cae76581ac..622ea29f6b 100644
--- a/core/src/components/loading/readme.md
+++ b/core/src/components/loading/readme.md
@@ -212,35 +212,38 @@ export class LoadingExample {
 
 ```html
 <template>
-  <IonVuePage :title="'Loading'">
-    <ion-button @click="presentLoading">Show Loading</ion-button>
-    <br />
-    <ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
-  </IonVuePage>
+  <ion-button @click="presentLoading">Show Loading</ion-button>
+  <br />
+  <ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
 </template>
 
 <script>
-export default {
+
+<script>
+import { IonButton, loadingController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
     timeout: { type: Number, default: 1000 },
   },
   methods: {
-    presentLoading() {
-      return this.$ionic.loadingController
+    async presentLoading() {
+      const loading = await loadingController
         .create({
           cssClass: 'my-custom-class',
           message: 'Please wait...',
           duration: this.timeout,
-        })
-        .then(loading => {
-          setTimeout(function() {
-            loading.dismiss()
-          }, this.timeout)
-          return loading.present()
-        })
+        });
+        
+      await loading.present();
+      
+      setTimeout(function() {
+        loading.dismiss()
+      }, this.timeout);
     },
-    presentLoadingWithOptions() {
-      return this.$ionic.loadingController
+    async presentLoadingWithOptions() {
+      const loading = await loadingController
         .create({
           spinner: null,
           duration: this.timeout,
@@ -248,16 +251,17 @@ export default {
           translucent: true,
           cssClass: 'custom-class custom-loading',
           backdropDismiss: true
-        })
-        .then(loading=> {
-          setTimeout(function() {
-            loading.dismiss()
-          }, this.timeout)
-          return loading.present()
-        })
+        });
+        
+      await loading.present();
+        
+      setTimeout(function() {
+        loading.dismiss()
+      }, this.timeout);
     },
   },
-}
+  components: { IonButton }
+});
 </script>
 ```
 
diff --git a/core/src/components/loading/usage/vue.md b/core/src/components/loading/usage/vue.md
index 1d3d572ad0..266a3326b4 100644
--- a/core/src/components/loading/usage/vue.md
+++ b/core/src/components/loading/usage/vue.md
@@ -1,34 +1,37 @@
 ```html
 <template>
-  <IonVuePage :title="'Loading'">
-    <ion-button @click="presentLoading">Show Loading</ion-button>
-    <br />
-    <ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
-  </IonVuePage>
+  <ion-button @click="presentLoading">Show Loading</ion-button>
+  <br />
+  <ion-button @click="presentLoadingWithOptions">Show Loading</ion-button>
 </template>
 
 <script>
-export default {
+
+<script>
+import { IonButton, loadingController } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   props: {
     timeout: { type: Number, default: 1000 },
   },
   methods: {
-    presentLoading() {
-      return this.$ionic.loadingController
+    async presentLoading() {
+      const loading = await loadingController
         .create({
           cssClass: 'my-custom-class',
           message: 'Please wait...',
           duration: this.timeout,
-        })
-        .then(loading => {
-          setTimeout(function() {
-            loading.dismiss()
-          }, this.timeout)
-          return loading.present()
-        })
+        });
+        
+      await loading.present();
+      
+      setTimeout(function() {
+        loading.dismiss()
+      }, this.timeout);
     },
-    presentLoadingWithOptions() {
-      return this.$ionic.loadingController
+    async presentLoadingWithOptions() {
+      const loading = await loadingController
         .create({
           spinner: null,
           duration: this.timeout,
@@ -36,15 +39,16 @@ export default {
           translucent: true,
           cssClass: 'custom-class custom-loading',
           backdropDismiss: true
-        })
-        .then(loading=> {
-          setTimeout(function() {
-            loading.dismiss()
-          }, this.timeout)
-          return loading.present()
-        })
+        });
+        
+      await loading.present();
+        
+      setTimeout(function() {
+        loading.dismiss()
+      }, this.timeout);
     },
   },
-}
+  components: { IonButton }
+});
 </script>
 ```
diff --git a/core/src/components/menu/readme.md b/core/src/components/menu/readme.md
index 06f8aefa1f..6d994def44 100644
--- a/core/src/components/menu/readme.md
+++ b/core/src/components/menu/readme.md
@@ -431,26 +431,45 @@ export class MenuExample {
 }
 </style>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
-
-  @Component()
-  export default class Example extends Vue {
+<script>
+import { 
+  IonContent, 
+  IonHeader, 
+  IonItem, 
+  IonList, 
+  IonMenu, 
+  IonRouterOutlet,
+  IonTitle, 
+  IonToolbar,
+  mentController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
 
+export default defineComponent({
+  components: {
+    IonContent, 
+    IonHeader, 
+    IonItem, 
+    IonList, 
+    IonMenu, 
+    IonRouterOutlet,
+    IonTitle, 
+    IonToolbar
+  },
+  methods: {
     openFirst() {
-      this.menu.enable(true, 'first');
-      this.menu.open('first');
-    }
-
+      mentController.enable(true, 'first');
+      mentController.open('first');
+    },
     openEnd() {
-      this.menu.open('end');
-    }
-
+      mentController.open('end');
+    },
     openCustom() {
-      this.menu.enable(true, 'custom');
-      this.menu.open('custom');
+      mentController.enable(true, 'custom');
+      mentController.open('custom');
     }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/menu/usage/vue.md b/core/src/components/menu/usage/vue.md
index e50eda683c..274d9642e3 100644
--- a/core/src/components/menu/usage/vue.md
+++ b/core/src/components/menu/usage/vue.md
@@ -59,25 +59,44 @@
 }
 </style>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
-
-  @Component()
-  export default class Example extends Vue {
+<script>
+import { 
+  IonContent, 
+  IonHeader, 
+  IonItem, 
+  IonList, 
+  IonMenu, 
+  IonRouterOutlet,
+  IonTitle, 
+  IonToolbar,
+  mentController
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
 
+export default defineComponent({
+  components: {
+    IonContent, 
+    IonHeader, 
+    IonItem, 
+    IonList, 
+    IonMenu, 
+    IonRouterOutlet,
+    IonTitle, 
+    IonToolbar
+  },
+  methods: {
     openFirst() {
-      this.menu.enable(true, 'first');
-      this.menu.open('first');
-    }
-
+      mentController.enable(true, 'first');
+      mentController.open('first');
+    },
     openEnd() {
-      this.menu.open('end');
-    }
-
+      mentController.open('end');
+    },
     openCustom() {
-      this.menu.enable(true, 'custom');
-      this.menu.open('custom');
+      mentController.enable(true, 'custom');
+      mentController.open('custom');
     }
   }
+});
 </script>
 ```
\ No newline at end of file
diff --git a/core/src/components/modal/readme.md b/core/src/components/modal/readme.md
index f71fe9ef66..6d3771b35a 100644
--- a/core/src/components/modal/readme.md
+++ b/core/src/components/modal/readme.md
@@ -591,7 +591,10 @@ async presentModal() {
 </template>
 
 <script>
-export default {
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: 'Modal',
   props: {
     title: { type: String, default: 'Super Modal' },
@@ -601,26 +604,29 @@ export default {
       content: 'Content',
     }
   },
-}
+  components: { IonContent, IonHeader, IonTitle, IonToolbar }
+});
 </script>
 ```
 
 ```html
 <template>
-  <ion-page class="ion-page">
-    <ion-content class="ion-content ion-padding">
+  <ion-page>
+    <ion-content class="ion-padding">
       <ion-button @click="openModal">Open Modal</ion-button>
     </ion-content>
   </ion-page>
 </template>
 
 <script>
+import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
 import Modal from './modal.vue'
 
 export default {
+  components: { IonButton, IonContent, IonPage },
   methods: {
-    openModal() {
-      return this.$ionic.modalController
+    async openModal() {
+      const modal = await modalController
         .create({
           component: Modal,
           cssClass: 'my-custom-class',
@@ -633,7 +639,7 @@ export default {
             },
           },
         })
-        .then(m => m.present())
+      return modal.present();
     },
   },
 }
diff --git a/core/src/components/modal/usage/vue.md b/core/src/components/modal/usage/vue.md
index 79e7884e70..8f9233315b 100644
--- a/core/src/components/modal/usage/vue.md
+++ b/core/src/components/modal/usage/vue.md
@@ -13,7 +13,10 @@
 </template>
 
 <script>
-export default {
+import { IonContent, IonHeader, IonTitle, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
   name: 'Modal',
   props: {
     title: { type: String, default: 'Super Modal' },
@@ -23,26 +26,29 @@ export default {
       content: 'Content',
     }
   },
-}
+  components: { IonContent, IonHeader, IonTitle, IonToolbar }
+});
 </script>
 ```
 
 ```html
 <template>
-  <ion-page class="ion-page">
-    <ion-content class="ion-content ion-padding">
+  <ion-page>
+    <ion-content class="ion-padding">
       <ion-button @click="openModal">Open Modal</ion-button>
     </ion-content>
   </ion-page>
 </template>
 
 <script>
+import { IonButton, IonContent, IonPage, modalController } from '@ionic/vue';
 import Modal from './modal.vue'
 
 export default {
+  components: { IonButton, IonContent, IonPage },
   methods: {
-    openModal() {
-      return this.$ionic.modalController
+    async openModal() {
+      const modal = await modalController
         .create({
           component: Modal,
           cssClass: 'my-custom-class',
@@ -55,7 +61,7 @@ export default {
             },
           },
         })
-        .then(m => m.present())
+      return modal.present();
     },
   },
 }
diff --git a/core/src/components/note/readme.md b/core/src/components/note/readme.md
index 9c1ec6ffe7..86e2750ed0 100644
--- a/core/src/components/note/readme.md
+++ b/core/src/components/note/readme.md
@@ -138,6 +138,15 @@ export class NoteExample {
     </ion-item>
   </ion-list>
 </template>
+
+<script>
+import { IonItem, IonLabel, IonList, IonNote } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonLabel, IonList, IonNote }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/note/usage/vue.md b/core/src/components/note/usage/vue.md
index 1a9cde11a3..f0a5e133a2 100644
--- a/core/src/components/note/usage/vue.md
+++ b/core/src/components/note/usage/vue.md
@@ -23,4 +23,13 @@
     </ion-item>
   </ion-list>
 </template>
+
+<script>
+import { IonItem, IonLabel, IonList, IonNote } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonLabel, IonList, IonNote }
+});
+</script>
 ```
diff --git a/core/src/components/popover/readme.md b/core/src/components/popover/readme.md
index 115786ccc0..b4c493fede 100644
--- a/core/src/components/popover/readme.md
+++ b/core/src/components/popover/readme.md
@@ -173,6 +173,58 @@ export class PagePopover {
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-content class="ion-padding">
+    Popover Content
+  </ion-content>
+</template>
+
+<script>
+import { IonContent } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Popover',
+  components: { IonContent }
+});
+</script>
+```
+
+```html
+<template>
+  <ion-page>
+    <ion-content class="ion-padding">
+      <ion-button @click="openPopover">Open Popover</ion-button>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { IonButton, IonContent, IonPage, popoverController } from '@ionic/vue';
+import Popver from './popover.vue'
+
+export default {
+  components: { IonButton, IonContent, IonPage },
+  methods: {
+    async openPopover(ev: Event) {
+      const popover = await popoverController
+        .create({
+          component: Popover,
+          cssClass: 'my-custom-class',
+          event: ev,
+          translucent: true
+        })
+      return popover.present();
+    },
+  },
+}
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/popover/usage/vue.md b/core/src/components/popover/usage/vue.md
new file mode 100644
index 0000000000..a46dc65d37
--- /dev/null
+++ b/core/src/components/popover/usage/vue.md
@@ -0,0 +1,48 @@
+```html
+<template>
+  <ion-content class="ion-padding">
+    Popover Content
+  </ion-content>
+</template>
+
+<script>
+import { IonContent } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  name: 'Popover',
+  components: { IonContent }
+});
+</script>
+```
+
+```html
+<template>
+  <ion-page>
+    <ion-content class="ion-padding">
+      <ion-button @click="openPopover">Open Popover</ion-button>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { IonButton, IonContent, IonPage, popoverController } from '@ionic/vue';
+import Popver from './popover.vue'
+
+export default {
+  components: { IonButton, IonContent, IonPage },
+  methods: {
+    async openPopover(ev: Event) {
+      const popover = await popoverController
+        .create({
+          component: Popover,
+          cssClass: 'my-custom-class',
+          event: ev,
+          translucent: true
+        })
+      return popover.present();
+    },
+  },
+}
+</script>
+```
diff --git a/core/src/components/progress-bar/readme.md b/core/src/components/progress-bar/readme.md
index b10543538b..56f88012e3 100644
--- a/core/src/components/progress-bar/readme.md
+++ b/core/src/components/progress-bar/readme.md
@@ -119,6 +119,15 @@ export class ProgressBarExample {
   <ion-progress-bar type="indeterminate"></ion-progress-bar>
   <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
 </template>
+
+<script>
+import { IonProgressBar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonProgressBar }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/progress-bar/usage/vue.md b/core/src/components/progress-bar/usage/vue.md
index 2b3261e288..85aa50e9ac 100644
--- a/core/src/components/progress-bar/usage/vue.md
+++ b/core/src/components/progress-bar/usage/vue.md
@@ -15,4 +15,13 @@
   <ion-progress-bar type="indeterminate"></ion-progress-bar>
   <ion-progress-bar type="indeterminate" reversed="true"></ion-progress-bar>
 </template>
+
+<script>
+import { IonProgressBar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonProgressBar }
+});
+</script>
 ```
diff --git a/core/src/components/radio-group/readme.md b/core/src/components/radio-group/readme.md
index c340d25067..4bc5d362c1 100644
--- a/core/src/components/radio-group/readme.md
+++ b/core/src/components/radio-group/readme.md
@@ -191,6 +191,29 @@ export class RadioGroupExample {
     </ion-radio-group>
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonItem, 
+  IonLabel, 
+  IonList, 
+  IonListHeader, 
+  IonRadio, 
+  IonRadioGroup
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonItem, 
+    IonLabel, 
+    IonList, 
+    IonListHeader, 
+    IonRadio, 
+    IonRadioGroup
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/radio-group/usage/vue.md b/core/src/components/radio-group/usage/vue.md
index 3333e6c28c..2312a39d85 100644
--- a/core/src/components/radio-group/usage/vue.md
+++ b/core/src/components/radio-group/usage/vue.md
@@ -35,4 +35,27 @@
     </ion-radio-group>
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonItem, 
+  IonLabel, 
+  IonList, 
+  IonListHeader, 
+  IonRadio, 
+  IonRadioGroup
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonItem, 
+    IonLabel, 
+    IonList, 
+    IonListHeader, 
+    IonRadio, 
+    IonRadioGroup
+  }
+});
+</script>
 ```
diff --git a/core/src/components/radio/readme.md b/core/src/components/radio/readme.md
index 01c03eb856..7682828189 100644
--- a/core/src/components/radio/readme.md
+++ b/core/src/components/radio/readme.md
@@ -154,6 +154,29 @@ export class RadioExample {
     </ion-radio-group>
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonItem, 
+  IonLabel, 
+  IonList, 
+  IonListHeader,
+  IonRadio, 
+  IonRadioGroup
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonItem, 
+    IonLabel, 
+    IonList, 
+    IonListHeader,
+    IonRadio, 
+    IonRadioGroup
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/radio/usage/vue.md b/core/src/components/radio/usage/vue.md
index e2f8bf8f9d..a210a9e07a 100644
--- a/core/src/components/radio/usage/vue.md
+++ b/core/src/components/radio/usage/vue.md
@@ -23,4 +23,27 @@
     </ion-radio-group>
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonItem, 
+  IonLabel, 
+  IonList, 
+  IonListHeader,
+  IonRadio, 
+  IonRadioGroup
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { 
+    IonItem, 
+    IonLabel, 
+    IonList, 
+    IonListHeader,
+    IonRadio, 
+    IonRadioGroup
+  }
+});
+</script>
 ```
diff --git a/core/src/components/range/readme.md b/core/src/components/range/readme.md
index 23f1951f30..692a57394b 100644
--- a/core/src/components/range/readme.md
+++ b/core/src/components/range/readme.md
@@ -252,12 +252,16 @@ export class RangeExample {
 </template>
 
 <script>
-export default {
+import { IonItem, IonLabel, IonList, IonRange } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {  IonItem, IonLabel, IonList, IonRange },
   mounted() {
     // Sets initial value for dual-knob ion-range
     this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };
   }
-}
+});
 </script>
 ```
 
diff --git a/core/src/components/range/usage/vue.md b/core/src/components/range/usage/vue.md
index aa9c1a4d47..97a9cd87eb 100644
--- a/core/src/components/range/usage/vue.md
+++ b/core/src/components/range/usage/vue.md
@@ -34,11 +34,15 @@
 </template>
 
 <script>
-export default {
+import { IonItem, IonLabel, IonList, IonRange } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {  IonItem, IonLabel, IonList, IonRange },
   mounted() {
     // Sets initial value for dual-knob ion-range
     this.$refs.rangeDualKnobs.value = { lower: 24, upper: 42 };
   }
-}
+});
 </script>
 ```
diff --git a/core/src/components/refresher/readme.md b/core/src/components/refresher/readme.md
index 99410a0bdf..48604174e7 100644
--- a/core/src/components/refresher/readme.md
+++ b/core/src/components/refresher/readme.md
@@ -237,7 +237,7 @@ export class RefresherExample {
   <ion-content>
     <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
       <ion-refresher-content
-        pulling-icon="chevron-down-circle-outline"
+        :pulling-icon="chevronDownCircleOutline"
         pulling-text="Pull to refresh"
         refreshing-spinner="circles"
         refreshing-text="Refreshing...">
@@ -247,20 +247,24 @@ export class RefresherExample {
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/vue';
+import { chevronDownCircleOutline } from 'ionicons/icons'
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-
-    doRefresh(event) {
+export default defineComponent({
+  components: { IonContent, IonRefresher, IonRefresherContent },
+  setup() {
+    const doRefresh = (event: CustomEvent) => {
       console.log('Begin async operation');
-
+      
       setTimeout(() => {
         console.log('Async operation has ended');
         event.target.complete();
       }, 2000);
     }
+    return { chevronDownCircleOutline, doRefresh }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/refresher/usage/vue.md b/core/src/components/refresher/usage/vue.md
index e5e79b8b9c..e7c94a0434 100644
--- a/core/src/components/refresher/usage/vue.md
+++ b/core/src/components/refresher/usage/vue.md
@@ -18,7 +18,7 @@
   <ion-content>
     <ion-refresher slot="fixed" @ionRefresh="doRefresh($event)">
       <ion-refresher-content
-        pulling-icon="chevron-down-circle-outline"
+        :pulling-icon="chevronDownCircleOutline"
         pulling-text="Pull to refresh"
         refreshing-spinner="circles"
         refreshing-text="Refreshing...">
@@ -28,19 +28,23 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+import { IonContent, IonRefresher, IonRefresherContent } from '@ionic/vue';
+import { chevronDownCircleOutline } from 'ionicons/icons'
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-
-    doRefresh(event) {
+export default defineComponent({
+  components: { IonContent, IonRefresher, IonRefresherContent },
+  setup() {
+    const doRefresh = (event: CustomEvent) => {
       console.log('Begin async operation');
-
+      
       setTimeout(() => {
         console.log('Async operation has ended');
         event.target.complete();
       }, 2000);
     }
+    return { chevronDownCircleOutline, doRefresh }
   }
+});
 </script>
 ```
\ No newline at end of file
diff --git a/core/src/components/reorder-group/readme.md b/core/src/components/reorder-group/readme.md
index bd22110ad2..e03b854193 100644
--- a/core/src/components/reorder-group/readme.md
+++ b/core/src/components/reorder-group/readme.md
@@ -576,13 +576,27 @@ export class ReorderGroupExample {
   </ion-reorder-group>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { 
+  IonIcon, 
+  IonItem, 
+  IonLabel, 
+  IonReorder, 
+  IonReorderGroup
+} from '@ionic/vue';
+import { pizza } from 'ionicons/icons';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-
-    doReorder(event) {
+export default defineComponent({
+  components: { 
+    IonIcon, 
+    IonItem, 
+    IonLabel, 
+    IonReorder, 
+    IonReorderGroup
+  },
+  setup() {
+    const doReorder = (event: CustomEvent) => {
       // The `from` and `to` properties contain the index of the item
       // when the drag started and ended, respectively
       console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -592,21 +606,25 @@ export class ReorderGroupExample {
       // by the reorder group
       event.detail.complete();
     }
+    return { doReorder, pizza }
   }
+});
 </script>
 ```
 
 ### Updating Data
 
 ```html
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+...
+import { defineComponent, ref } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    items = [1, 2, 3, 4, 5];
+export default defineComponent({
+  ...
+  setup() {
+    const items = ref([1, 2, 3, 4, 5]);
 
-    doReorder(event) {
+    const doReorder = (event: CustomEvent) => {
       // Before complete is called with the items they will remain in the
       // order before the drag
       console.log('Before complete', this.items);
@@ -614,12 +632,14 @@ export class ReorderGroupExample {
       // Finish the reorder and position the item in the DOM based on
       // where the gesture ended. Update the items variable to the
       // new order of items
-      this.items = event.detail.complete(this.items);
+      items.value = event.detail.complete(items.value);
 
       // After complete is called the items will be in the new order
       console.log('After complete', this.items);
     }
+    return { doReorder, items, ... }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/reorder-group/usage/vue.md b/core/src/components/reorder-group/usage/vue.md
index 019013527f..bb51cad891 100644
--- a/core/src/components/reorder-group/usage/vue.md
+++ b/core/src/components/reorder-group/usage/vue.md
@@ -70,13 +70,27 @@
   </ion-reorder-group>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { 
+  IonIcon, 
+  IonItem, 
+  IonLabel, 
+  IonReorder, 
+  IonReorderGroup
+} from '@ionic/vue';
+import { pizza } from 'ionicons/icons';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-
-    doReorder(event) {
+export default defineComponent({
+  components: { 
+    IonIcon, 
+    IonItem, 
+    IonLabel, 
+    IonReorder, 
+    IonReorderGroup
+  },
+  setup() {
+    const doReorder = (event: CustomEvent) => {
       // The `from` and `to` properties contain the index of the item
       // when the drag started and ended, respectively
       console.log('Dragged from index', event.detail.from, 'to', event.detail.to);
@@ -86,21 +100,25 @@
       // by the reorder group
       event.detail.complete();
     }
+    return { doReorder, pizza }
   }
+});
 </script>
 ```
 
 ### Updating Data
 
 ```html
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+...
+import { defineComponent, ref } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    items = [1, 2, 3, 4, 5];
+export default defineComponent({
+  ...
+  setup() {
+    const items = ref([1, 2, 3, 4, 5]);
 
-    doReorder(event) {
+    const doReorder = (event: CustomEvent) => {
       // Before complete is called with the items they will remain in the
       // order before the drag
       console.log('Before complete', this.items);
@@ -108,11 +126,13 @@
       // Finish the reorder and position the item in the DOM based on
       // where the gesture ended. Update the items variable to the
       // new order of items
-      this.items = event.detail.complete(this.items);
+      items.value = event.detail.complete(items.value);
 
       // After complete is called the items will be in the new order
       console.log('After complete', this.items);
     }
+    return { doReorder, items, ... }
   }
+});
 </script>
 ```
diff --git a/core/src/components/reorder/readme.md b/core/src/components/reorder/readme.md
index 01d69bca60..1b77055ce7 100644
--- a/core/src/components/reorder/readme.md
+++ b/core/src/components/reorder/readme.md
@@ -241,7 +241,7 @@ export class ReorderExample {
 ```html
 <template>
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-  <ion-reorder-group disabled="false">
+  <ion-reorder-group :disabled="false">
     <!-- Default reorder icon, end aligned items -->
     <ion-item>
       <ion-label>
@@ -309,6 +309,31 @@ export class ReorderExample {
     </ion-reorder>
   </ion-reorder-group>
 </template>
+
+<script>
+import { 
+  IonIcon, 
+  IonItem,
+  IonLabel, 
+  IonReorder, 
+  IonReorderGroup
+} from '@ionic/vue';
+import { pizza } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonIcon,
+    IonItem, 
+    IonLabel, 
+    IonReorder, 
+    IonReorderGroup
+  },
+  setup() {
+    return { pizza }
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/reorder/usage/vue.md b/core/src/components/reorder/usage/vue.md
index 0c5b3931ba..f34a2a47f8 100644
--- a/core/src/components/reorder/usage/vue.md
+++ b/core/src/components/reorder/usage/vue.md
@@ -1,7 +1,7 @@
 ```html
 <template>
   <!-- The reorder gesture is disabled by default, enable it to drag and drop items -->
-  <ion-reorder-group disabled="false">
+  <ion-reorder-group :disabled="false">
     <!-- Default reorder icon, end aligned items -->
     <ion-item>
       <ion-label>
@@ -69,4 +69,29 @@
     </ion-reorder>
   </ion-reorder-group>
 </template>
+
+<script>
+import { 
+  IonIcon, 
+  IonItem,
+  IonLabel, 
+  IonReorder, 
+  IonReorderGroup
+} from '@ionic/vue';
+import { pizza } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonIcon,
+    IonItem, 
+    IonLabel, 
+    IonReorder, 
+    IonReorderGroup
+  },
+  setup() {
+    return { pizza }
+  }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/ripple-effect/readme.md b/core/src/components/ripple-effect/readme.md
index 5c418113ea..8c928b8a72 100644
--- a/core/src/components/ripple-effect/readme.md
+++ b/core/src/components/ripple-effect/readme.md
@@ -172,6 +172,15 @@ export class RippleEffectExample {
     overflow: hidden;
   }
 </style>
+
+<script>
+import { IonApp, IonContent, IonRippleEffect } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonApp, IonContent, IonRippleEffect }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/ripple-effect/usage/vue.md b/core/src/components/ripple-effect/usage/vue.md
index f597564a41..e4ead93e77 100644
--- a/core/src/components/ripple-effect/usage/vue.md
+++ b/core/src/components/ripple-effect/usage/vue.md
@@ -31,4 +31,13 @@
     overflow: hidden;
   }
 </style>
+
+<script>
+import { IonApp, IonContent, IonRippleEffect } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonApp, IonContent, IonRippleEffect }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/router-outlet/readme.md b/core/src/components/router-outlet/readme.md
index 7239d64124..9e7883c0b3 100644
--- a/core/src/components/router-outlet/readme.md
+++ b/core/src/components/router-outlet/readme.md
@@ -1,10 +1,10 @@
 # ion-router-outlet
 
-Router outlet is a component used in routing within an Angular app. It behaves in a similar way to Angular's built-in router outlet component, but contains the logic for providing a stacked navigation, and animating views in and out.
+Router outlet is a component used in routing within an Angular or Vue app. It behaves in a similar way to Angular's built-in router outlet component and Vue's router view component, but contains the logic for providing a stacked navigation, and animating views in and out.
 
-> Note: this component should only be used with Angular projects. For vanilla or Stencil JavaScript projects, use [`ion-router`](../router) and [`ion-route`](../route).
+> Note: this component should only be used with Angular and Vue projects. For vanilla or Stencil JavaScript projects, use [`ion-router`](../router) and [`ion-route`](../route).
 
-Although router outlet has methods for navigating around, it's recommended to use the navigation methods in Angular's router.
+Although router outlet has methods for navigating around, it's recommended to use the navigation methods in your framework's router.
 
 
 ## Life Cycle Hooks
@@ -20,7 +20,7 @@ Routes rendered in a Router Outlet have access to specific Ionic events that are
 | `ionViewDidLeave`  | Fired when the component routing to has finished animating.        |
 
 
-These event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with it's animation. These events are not a replacement for Angular's own event system, but an addition.
+These event tie into Ionic's animation system and can be used to coordinate parts of your app when a Components is done with its animation. These events are not a replacement for your framework's own event system, but an addition.
 
 For handling Router Guards, the older `ionViewCanEnter` and `ionViewCanLeave` have been replaced with their framework specific equivalent. For Angular, there are [Router Guards](https://angular.io/guide/router#milestone-5-route-guards).
 
diff --git a/core/src/components/searchbar/readme.md b/core/src/components/searchbar/readme.md
index 780f800e79..fb63f4a92b 100644
--- a/core/src/components/searchbar/readme.md
+++ b/core/src/components/searchbar/readme.md
@@ -296,6 +296,15 @@ export class SearchbarExample {
     <ion-searchbar></ion-searchbar>
   </ion-toolbar>
 </template>
+
+<script>
+import { IonSearchbar, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonSearchbar, IonToolbar }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/searchbar/usage/vue.md b/core/src/components/searchbar/usage/vue.md
index fc93a77351..ba99c11ac2 100644
--- a/core/src/components/searchbar/usage/vue.md
+++ b/core/src/components/searchbar/usage/vue.md
@@ -44,4 +44,13 @@
     <ion-searchbar></ion-searchbar>
   </ion-toolbar>
 </template>
+
+<script>
+import { IonSearchbar, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonSearchbar, IonToolbar }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/segment-button/readme.md b/core/src/components/segment-button/readme.md
index bab2b59875..921a9d8b2f 100644
--- a/core/src/components/segment-button/readme.md
+++ b/core/src/components/segment-button/readme.md
@@ -658,10 +658,10 @@ export class SegmentButtonExample {
   <!-- Segment buttons with values and icons -->
   <ion-segment>
     <ion-segment-button value="camera">
-      <ion-icon name="camera"></ion-icon>
+      <ion-icon :icon="camera"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="bookmark">
-      <ion-icon name="bookmark"></ion-icon>
+      <ion-icon :icon="bookmark"></ion-icon>
     </ion-segment-button>
   </ion-segment>
 
@@ -694,13 +694,13 @@ export class SegmentButtonExample {
   <!-- Icon only -->
   <ion-segment value="heart">
     <ion-segment-button value="call">
-      <ion-icon name="call"></ion-icon>
+      <ion-icon :icon="call"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="heart">
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon :icon="heart"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="pin">
-      <ion-icon name="pin"></ion-icon>
+      <ion-icon :icon="pin"></ion-icon>
     </ion-segment-button>
   </ion-segment>
   
@@ -708,30 +708,30 @@ export class SegmentButtonExample {
   <ion-segment value="2">
     <ion-segment-button value="1">
       <ion-label>Item One</ion-label>
-      <ion-icon name="call"></ion-icon>
+      <ion-icon :icon="call"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="2">
       <ion-label>Item Two</ion-label>
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon :icon="heart"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="3">
       <ion-label>Item Three</ion-label>
-      <ion-icon name="pin"></ion-icon>
+      <ion-icon :icon="pin"></ion-icon>
     </ion-segment-button>
   </ion-segment>
   
   <!-- Icon bottom -->
   <ion-segment value="1">
     <ion-segment-button value="1" layout="icon-bottom">
-      <ion-icon name="call"></ion-icon>
+      <ion-icon :icon="call"></ion-icon>
       <ion-label>Item One</ion-label>
     </ion-segment-button>
     <ion-segment-button value="2" layout="icon-bottom">
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon :icon="heart"></ion-icon>
       <ion-label>Item Two</ion-label>
     </ion-segment-button>
     <ion-segment-button value="3" layout="icon-bottom">
-      <ion-icon name="pin"></ion-icon>
+      <ion-icon :icon="pin"></ion-icon>
       <ion-label>Item Three</ion-label>
     </ion-segment-button>
   </ion-segment>
@@ -740,44 +740,57 @@ export class SegmentButtonExample {
   <ion-segment value="1">
     <ion-segment-button value="1" layout="icon-start">
       <ion-label>Item One</ion-label>
-      <ion-icon name="call"></ion-icon>
+      <ion-icon :icon="call"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="2" layout="icon-start">
       <ion-label>Item Two</ion-label>
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon :icon="heart"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="3" layout="icon-start">
       <ion-label>Item Three</ion-label>
-      <ion-icon name="pin"></ion-icon>
+      <ion-icon :icon="pin"></ion-icon>
     </ion-segment-button>
   </ion-segment>
   
   <!-- Icon end -->
   <ion-segment value="1">
     <ion-segment-button value="1" layout="icon-end">
-      <ion-icon name="call"></ion-icon>
+      <ion-icon :icon="call"></ion-icon>
       <ion-label>Item One</ion-label>
     </ion-segment-button>
     <ion-segment-button value="2" disabled layout="icon-end">
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon :icon="heart"></ion-icon>
       <ion-label>Item Two</ion-label>
     </ion-segment-button>
     <ion-segment-button value="3" layout="icon-end">
-      <ion-icon name="pin"></ion-icon>
+      <ion-icon :icon="pin"></ion-icon>
       <ion-label>Item Three</ion-label>
     </ion-segment-button>
   </ion-segment>
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
+import { bookmark, call, camera, heart, pin } from 'ionicons/icons';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    segmentChanged(ev: any) {
+export default defineComponent({
+  components: { IonIcon, IonLabel, IonSegment, IonSegmentButtonr },
+  methods: {
+    segmentChanged(ev: CustomEvent) {
       console.log('Segment changed', ev);
     }
   }
+  setup() {
+    return { 
+      bookmark, 
+      call, 
+      camera, 
+      heart, 
+      pin
+    }
+  }
+});
 </script>
 ```
 
diff --git a/core/src/components/segment-button/usage/vue.md b/core/src/components/segment-button/usage/vue.md
index 0f02e396cc..ae651c1f30 100644
--- a/core/src/components/segment-button/usage/vue.md
+++ b/core/src/components/segment-button/usage/vue.md
@@ -26,10 +26,10 @@
   <!-- Segment buttons with values and icons -->
   <ion-segment>
     <ion-segment-button value="camera">
-      <ion-icon name="camera"></ion-icon>
+      <ion-icon :icon="camera"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="bookmark">
-      <ion-icon name="bookmark"></ion-icon>
+      <ion-icon :icon="bookmark"></ion-icon>
     </ion-segment-button>
   </ion-segment>
 
@@ -62,13 +62,13 @@
   <!-- Icon only -->
   <ion-segment value="heart">
     <ion-segment-button value="call">
-      <ion-icon name="call"></ion-icon>
+      <ion-icon :icon="call"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="heart">
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon :icon="heart"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="pin">
-      <ion-icon name="pin"></ion-icon>
+      <ion-icon :icon="pin"></ion-icon>
     </ion-segment-button>
   </ion-segment>
   
@@ -76,30 +76,30 @@
   <ion-segment value="2">
     <ion-segment-button value="1">
       <ion-label>Item One</ion-label>
-      <ion-icon name="call"></ion-icon>
+      <ion-icon :icon="call"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="2">
       <ion-label>Item Two</ion-label>
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon :icon="heart"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="3">
       <ion-label>Item Three</ion-label>
-      <ion-icon name="pin"></ion-icon>
+      <ion-icon :icon="pin"></ion-icon>
     </ion-segment-button>
   </ion-segment>
   
   <!-- Icon bottom -->
   <ion-segment value="1">
     <ion-segment-button value="1" layout="icon-bottom">
-      <ion-icon name="call"></ion-icon>
+      <ion-icon :icon="call"></ion-icon>
       <ion-label>Item One</ion-label>
     </ion-segment-button>
     <ion-segment-button value="2" layout="icon-bottom">
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon :icon="heart"></ion-icon>
       <ion-label>Item Two</ion-label>
     </ion-segment-button>
     <ion-segment-button value="3" layout="icon-bottom">
-      <ion-icon name="pin"></ion-icon>
+      <ion-icon :icon="pin"></ion-icon>
       <ion-label>Item Three</ion-label>
     </ion-segment-button>
   </ion-segment>
@@ -108,43 +108,56 @@
   <ion-segment value="1">
     <ion-segment-button value="1" layout="icon-start">
       <ion-label>Item One</ion-label>
-      <ion-icon name="call"></ion-icon>
+      <ion-icon :icon="call"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="2" layout="icon-start">
       <ion-label>Item Two</ion-label>
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon :icon="heart"></ion-icon>
     </ion-segment-button>
     <ion-segment-button value="3" layout="icon-start">
       <ion-label>Item Three</ion-label>
-      <ion-icon name="pin"></ion-icon>
+      <ion-icon :icon="pin"></ion-icon>
     </ion-segment-button>
   </ion-segment>
   
   <!-- Icon end -->
   <ion-segment value="1">
     <ion-segment-button value="1" layout="icon-end">
-      <ion-icon name="call"></ion-icon>
+      <ion-icon :icon="call"></ion-icon>
       <ion-label>Item One</ion-label>
     </ion-segment-button>
     <ion-segment-button value="2" disabled layout="icon-end">
-      <ion-icon name="heart"></ion-icon>
+      <ion-icon :icon="heart"></ion-icon>
       <ion-label>Item Two</ion-label>
     </ion-segment-button>
     <ion-segment-button value="3" layout="icon-end">
-      <ion-icon name="pin"></ion-icon>
+      <ion-icon :icon="pin"></ion-icon>
       <ion-label>Item Three</ion-label>
     </ion-segment-button>
   </ion-segment>
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+import { IonIcon, IonLabel, IonSegment, IonSegmentButton } from '@ionic/vue';
+import { bookmark, call, camera, heart, pin } from 'ionicons/icons';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    segmentChanged(ev: any) {
+export default defineComponent({
+  components: { IonIcon, IonLabel, IonSegment, IonSegmentButtonr },
+  methods: {
+    segmentChanged(ev: CustomEvent) {
       console.log('Segment changed', ev);
     }
   }
+  setup() {
+    return { 
+      bookmark, 
+      call, 
+      camera, 
+      heart, 
+      pin
+    }
+  }
+});
 </script>
 ```
diff --git a/core/src/components/segment/readme.md b/core/src/components/segment/readme.md
index df29bed5a3..bac38f632c 100644
--- a/core/src/components/segment/readme.md
+++ b/core/src/components/segment/readme.md
@@ -548,14 +548,17 @@ export class SegmentExample {
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+import { IonSegment, IonSegmentButton, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    segmentChanged(ev: any) {
+export default defineComponent({
+  components: { IonSegment, IonSegmentButton, IonToolbar },
+  methods: {
+    segmentChanged(ev: CustomEvent) {
       console.log('Segment changed', ev);
     }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/segment/usage/vue.md b/core/src/components/segment/usage/vue.md
index 3d175b87b2..3e9f467412 100644
--- a/core/src/components/segment/usage/vue.md
+++ b/core/src/components/segment/usage/vue.md
@@ -92,13 +92,16 @@
 </template>
 
 <script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+import { IonSegment, IonSegmentButton, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    segmentChanged(ev: any) {
+export default defineComponent({
+  components: { IonSegment, IonSegmentButton, IonToolbar },
+  methods: {
+    segmentChanged(ev: CustomEvent) {
       console.log('Segment changed', ev);
     }
   }
+});
 </script>
 ```
diff --git a/core/src/components/select-option/readme.md b/core/src/components/select-option/readme.md
index 8e6f54cf9c..616f06a3f8 100644
--- a/core/src/components/select-option/readme.md
+++ b/core/src/components/select-option/readme.md
@@ -516,6 +516,15 @@ export class SelectOptionExample {
     </ion-select>
   </ion-item>
 </template>
+
+<script>
+import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonLabel, IonSelect, IonSelectOption }
+});
+</script>
 ```
 
 ### Customizing Options
@@ -563,16 +572,20 @@ export class SelectOptionExample {
   </ion-item>
 </template>
 
+<script>
+import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
-
-  @Component()
-  export default class Example extends Vue {
-    options: any = {
+export default defineComponent({
+  components: { IonItem, IonLabel, IonSelect, IonSelectOption },
+  setup() {
+    const options: any = {
       cssClass: 'my-custom-interface'
     };
+    
+    return { options }
   }
+});
 </script>
 ```
 
@@ -630,15 +643,20 @@ To customize an individual option, set a class on the `ion-select-option`:
   </ion-item>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    options: any = {
+export default defineComponent({
+  components: { IonItem, IonLabel, IonSelect, IonSelectOption },
+  setup() {
+    const options: any = {
       cssClass: 'my-custom-interface'
     };
+    
+    return { options }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/select-option/usage/vue.md b/core/src/components/select-option/usage/vue.md
index be7696b1b0..ea30ffd906 100644
--- a/core/src/components/select-option/usage/vue.md
+++ b/core/src/components/select-option/usage/vue.md
@@ -10,6 +10,15 @@
     </ion-select>
   </ion-item>
 </template>
+
+<script>
+import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonLabel, IonSelect, IonSelectOption }
+});
+</script>
 ```
 
 ### Customizing Options
@@ -57,16 +66,20 @@
   </ion-item>
 </template>
 
+<script>
+import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
-
-  @Component()
-  export default class Example extends Vue {
-    options: any = {
+export default defineComponent({
+  components: { IonItem, IonLabel, IonSelect, IonSelectOption },
+  setup() {
+    const options: any = {
       cssClass: 'my-custom-interface'
     };
+    
+    return { options }
   }
+});
 </script>
 ```
 
@@ -124,15 +137,20 @@ To customize an individual option, set a class on the `ion-select-option`:
   </ion-item>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonItem, IonLabel, IonSelect, IonSelectOption } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    options: any = {
+export default defineComponent({
+  components: { IonItem, IonLabel, IonSelect, IonSelectOption },
+  setup() {
+    const options: any = {
       cssClass: 'my-custom-interface'
     };
+    
+    return { options }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/select/readme.md b/core/src/components/select/readme.md
index f3443110fa..8d8825a3de 100644
--- a/core/src/components/select/readme.md
+++ b/core/src/components/select/readme.md
@@ -1084,6 +1084,29 @@ export class SelectExample {
 
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonItem, 
+  IonLabel, 
+  IonList,
+  IonListHeader,
+  IonSelect,
+  IonSelectOption
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonItem, 
+    IonLabel, 
+    IonList,
+    IonListHeader,
+    IonSelect,
+    IonSelectOption
+  }
+});
+</script>
 ```
 
 ### Multiple Selection
@@ -1124,6 +1147,29 @@ export class SelectExample {
     </ion-item>
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonItem, 
+  IonLabel, 
+  IonList,
+  IonListHeader,
+  IonSelect,
+  IonSelectOption
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonItem, 
+    IonLabel, 
+    IonList,
+    IonListHeader,
+    IonSelect,
+    IonSelectOption
+  }
+});
+</script>
 ```
 
 ### Interface Options
@@ -1177,29 +1223,52 @@ export class SelectExample {
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { 
+  IonItem, 
+  IonLabel, 
+  IonList,
+  IonListHeader,
+  IonSelect,
+  IonSelectOption
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    customAlertOptions: any = {
+export default defineComponent({
+  components: {
+    IonItem, 
+    IonLabel, 
+    IonList,
+    IonListHeader,
+    IonSelect,
+    IonSelectOption
+  },
+  setup() {
+    const customAlertOptions: any = {
       header: 'Pizza Toppings',
       subHeader: 'Select your toppings',
       message: '$1.00 per topping',
       translucent: true
     };
 
-    customPopoverOptions: any = {
+    const customPopoverOptions: any = {
       header: 'Hair Color',
       subHeader: 'Select your hair color',
       message: 'Only select your dominant hair color'
     };
 
-    customActionSheetOptions: any = {
+    const customActionSheetOptions: any = {
       header: 'Colors',
       subHeader: 'Select your favorite color'
     };
+    
+    return {
+      customAlertOptions,
+      customPopoverOptions,
+      customActionSheetOptions
+    }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/select/usage/vue.md b/core/src/components/select/usage/vue.md
index 6c73ab0705..8d8baeee38 100644
--- a/core/src/components/select/usage/vue.md
+++ b/core/src/components/select/usage/vue.md
@@ -29,6 +29,29 @@
 
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonItem, 
+  IonLabel, 
+  IonList,
+  IonListHeader,
+  IonSelect,
+  IonSelectOption
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonItem, 
+    IonLabel, 
+    IonList,
+    IonListHeader,
+    IonSelect,
+    IonSelectOption
+  }
+});
+</script>
 ```
 
 ### Multiple Selection
@@ -69,6 +92,29 @@
     </ion-item>
   </ion-list>
 </template>
+
+<script>
+import { 
+  IonItem, 
+  IonLabel, 
+  IonList,
+  IonListHeader,
+  IonSelect,
+  IonSelectOption
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonItem, 
+    IonLabel, 
+    IonList,
+    IonListHeader,
+    IonSelect,
+    IonSelectOption
+  }
+});
+</script>
 ```
 
 ### Interface Options
@@ -122,28 +168,51 @@
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { 
+  IonItem, 
+  IonLabel, 
+  IonList,
+  IonListHeader,
+  IonSelect,
+  IonSelectOption
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    customAlertOptions: any = {
+export default defineComponent({
+  components: {
+    IonItem, 
+    IonLabel, 
+    IonList,
+    IonListHeader,
+    IonSelect,
+    IonSelectOption
+  },
+  setup() {
+    const customAlertOptions: any = {
       header: 'Pizza Toppings',
       subHeader: 'Select your toppings',
       message: '$1.00 per topping',
       translucent: true
     };
 
-    customPopoverOptions: any = {
+    const customPopoverOptions: any = {
       header: 'Hair Color',
       subHeader: 'Select your hair color',
       message: 'Only select your dominant hair color'
     };
 
-    customActionSheetOptions: any = {
+    const customActionSheetOptions: any = {
       header: 'Colors',
       subHeader: 'Select your favorite color'
     };
+    
+    return {
+      customAlertOptions,
+      customPopoverOptions,
+      customActionSheetOptions
+    }
   }
+});
 </script>
 ```
diff --git a/core/src/components/skeleton-text/readme.md b/core/src/components/skeleton-text/readme.md
index 50ec2be3d1..cfc6beda84 100644
--- a/core/src/components/skeleton-text/readme.md
+++ b/core/src/components/skeleton-text/readme.md
@@ -719,7 +719,7 @@ export class SkeletonTextExample {
         </ion-label>
       </ion-item>
       <ion-item>
-        <ion-icon name="call" slot="start"></ion-icon>
+        <ion-icon :icon="call" slot="start"></ion-icon>
         <ion-label>
           <h3>
             {{ data.heading }}
@@ -812,23 +812,45 @@ export class SkeletonTextExample {
   }
 </style>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { 
+  IonAvatar,
+  IonIcon,
+  IonItem, 
+  IonLabel, 
+  IonList, 
+  IonListheader,
+  IonSkeletonText,
+  IonThumbnail
+} from '@ionic/vue';
+import { call } from 'ionicons/icons';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    data: any;
-
-    mounted() {
-      setTimeout(() => {
-        this.data = {
-          'heading': 'Normal text',
-          'para1': 'Lorem ipsum dolor sit amet, consectetur',
-          'para2': 'adipiscing elit.'
-        };
-      }, 5000);
-    }
+export default defineComponent({
+  components: {
+    IonAvatar,
+    IonIcon,
+    IonItem, 
+    IonLabel, 
+    IonList, 
+    IonListheader,
+    IonSkeletonText,
+    IonThumbnail
+  },
+  setup() {
+    const data = ref();
+    
+    setTimeout(() => {
+      data.value = {
+        'heading': 'Normal text',
+        'para1': 'Lorem ipsum dolor sit amet, consectetur',
+        'para2': 'adipiscing elit.'
+      };
+    }, 5000);
+    
+    return { data }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/skeleton-text/usage/vue.md b/core/src/components/skeleton-text/usage/vue.md
index 26afc56958..5e6dcfd1f9 100644
--- a/core/src/components/skeleton-text/usage/vue.md
+++ b/core/src/components/skeleton-text/usage/vue.md
@@ -45,7 +45,7 @@
         </ion-label>
       </ion-item>
       <ion-item>
-        <ion-icon name="call" slot="start"></ion-icon>
+        <ion-icon :icon="call" slot="start"></ion-icon>
         <ion-label>
           <h3>
             {{ data.heading }}
@@ -138,22 +138,44 @@
   }
 </style>
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { 
+  IonAvatar,
+  IonIcon,
+  IonItem, 
+  IonLabel, 
+  IonList, 
+  IonListheader,
+  IonSkeletonText,
+  IonThumbnail
+} from '@ionic/vue';
+import { call } from 'ionicons/icons';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
-    data: any;
-
-    mounted() {
-      setTimeout(() => {
-        this.data = {
-          'heading': 'Normal text',
-          'para1': 'Lorem ipsum dolor sit amet, consectetur',
-          'para2': 'adipiscing elit.'
-        };
-      }, 5000);
-    }
+export default defineComponent({
+  components: {
+    IonAvatar,
+    IonIcon,
+    IonItem, 
+    IonLabel, 
+    IonList, 
+    IonListheader,
+    IonSkeletonText,
+    IonThumbnail
+  },
+  setup() {
+    const data = ref();
+    
+    setTimeout(() => {
+      data.value = {
+        'heading': 'Normal text',
+        'para1': 'Lorem ipsum dolor sit amet, consectetur',
+        'para2': 'adipiscing elit.'
+      };
+    }, 5000);
+    
+    return { data }
   }
+});
 </script>
 ```
\ No newline at end of file
diff --git a/core/src/components/slides/readme.md b/core/src/components/slides/readme.md
index 7f32630124..6ab54c5620 100644
--- a/core/src/components/slides/readme.md
+++ b/core/src/components/slides/readme.md
@@ -618,17 +618,21 @@ ion-slides {
 </template>
 
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonSlides, IonSlide } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
+export default defineComponent({
+  components: { IonSlides, IonSlide },
+  setup() {
     // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
-    slideOpts = {
+    const slideOpts = {
       initialSlide: 1,
       speed: 400
     };
+    return { slideOpts }
   }
+});
 </script>
 ```
 
diff --git a/core/src/components/slides/usage/vue.md b/core/src/components/slides/usage/vue.md
index 594051f158..c085daeec0 100644
--- a/core/src/components/slides/usage/vue.md
+++ b/core/src/components/slides/usage/vue.md
@@ -14,16 +14,20 @@
 </template>
 
 
-<script lang="ts">
-  import { Component, Vue } from 'vue-property-decorator';
+<script>
+import { IonSlides, IonSlide } from '@ionic/vue';
+import { defineComponent } from 'vue';
 
-  @Component()
-  export default class Example extends Vue {
+export default defineComponent({
+  components: { IonSlides, IonSlide },
+  setup() {
     // Optional parameters to pass to the swiper instance. See http://idangero.us/swiper/api/ for valid options.
-    slideOpts = {
+    const slideOpts = {
       initialSlide: 1,
       speed: 400
     };
+    return { slideOpts }
   }
+});
 </script>
 ```
diff --git a/core/src/components/spinner/readme.md b/core/src/components/spinner/readme.md
index 3c35a959a9..dff3da5c03 100644
--- a/core/src/components/spinner/readme.md
+++ b/core/src/components/spinner/readme.md
@@ -145,6 +145,15 @@ export class SpinnerExample {
   <!-- Paused Default Spinner -->
   <ion-spinner paused></ion-spinner>
 </template>
+
+<script>
+import { IonSpinner } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonSpinner }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/spinner/usage/vue.md b/core/src/components/spinner/usage/vue.md
index 4ce102ebd9..3ea04e5156 100644
--- a/core/src/components/spinner/usage/vue.md
+++ b/core/src/components/spinner/usage/vue.md
@@ -24,4 +24,13 @@
   <!-- Paused Default Spinner -->
   <ion-spinner paused></ion-spinner>
 </template>
+
+<script>
+import { IonSpinner } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonSpinner }
+});
+</script>
 ```
diff --git a/core/src/components/split-pane/readme.md b/core/src/components/split-pane/readme.md
index 3901511e1b..0f6f5ec4b5 100644
--- a/core/src/components/split-pane/readme.md
+++ b/core/src/components/split-pane/readme.md
@@ -158,6 +158,29 @@ export class SplitPaneExample {
     <ion-router-outlet id="main"></ion-router-outlet>
   </ion-split-pane>
 </template>
+
+<script>
+import { 
+  IonHeader, 
+  IonMenu, 
+  IonRouterOutlet, 
+  IonSplitPane, 
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonHeader, 
+    IonMenu, 
+    IonRouterOutlet, 
+    IonSplitPane, 
+    IonTitle, 
+    IonToolbar
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/split-pane/usage/vue.md b/core/src/components/split-pane/usage/vue.md
index 51a6cbe660..aa2bdd1199 100644
--- a/core/src/components/split-pane/usage/vue.md
+++ b/core/src/components/split-pane/usage/vue.md
@@ -14,4 +14,27 @@
     <ion-router-outlet id="main"></ion-router-outlet>
   </ion-split-pane>
 </template>
+
+<script>
+import { 
+  IonHeader, 
+  IonMenu, 
+  IonRouterOutlet, 
+  IonSplitPane, 
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonHeader, 
+    IonMenu, 
+    IonRouterOutlet, 
+    IonSplitPane, 
+    IonTitle, 
+    IonToolbar
+  }
+});
+</script>
 ```
diff --git a/core/src/components/tab-bar/readme.md b/core/src/components/tab-bar/readme.md
index 038b14b265..73aa4c73e2 100644
--- a/core/src/components/tab-bar/readme.md
+++ b/core/src/components/tab-bar/readme.md
@@ -126,17 +126,30 @@ export class TabBarExample {
     <!-- Tab bar -->
     <ion-tab-bar slot="bottom">
       <ion-tab-button tab="account">
-        <ion-icon name="person"></ion-icon>
+        <ion-icon :icon="person"></ion-icon>
       </ion-tab-button>
       <ion-tab-button tab="contact">
-        <ion-icon name="call"></ion-icon>
+        <ion-icon :icon="call"></ion-icon>
       </ion-tab-button>
       <ion-tab-button tab="settings">
-        <ion-icon name="settings"></ion-icon>
+        <ion-icon :icon="settings"></ion-icon>
       </ion-tab-button>
     </ion-tab-bar>
   </ion-tabs>
 </template>
+
+<script>
+import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
+import { call, person, settings } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonIcon, IonTabBar, IonTabButton, IonTabs },
+  setup() {
+    return { call, person, settings }
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/tab-bar/usage/vue.md b/core/src/components/tab-bar/usage/vue.md
index 35b60d7a46..7729d47e1d 100644
--- a/core/src/components/tab-bar/usage/vue.md
+++ b/core/src/components/tab-bar/usage/vue.md
@@ -4,15 +4,28 @@
     <!-- Tab bar -->
     <ion-tab-bar slot="bottom">
       <ion-tab-button tab="account">
-        <ion-icon name="person"></ion-icon>
+        <ion-icon :icon="person"></ion-icon>
       </ion-tab-button>
       <ion-tab-button tab="contact">
-        <ion-icon name="call"></ion-icon>
+        <ion-icon :icon="call"></ion-icon>
       </ion-tab-button>
       <ion-tab-button tab="settings">
-        <ion-icon name="settings"></ion-icon>
+        <ion-icon :icon="settings"></ion-icon>
       </ion-tab-button>
     </ion-tab-bar>
   </ion-tabs>
 </template>
+
+<script>
+import { IonIcon, IonTabBar, IonTabButton, IonTabs } from '@ionic/vue';
+import { call, person, settings } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonIcon, IonTabBar, IonTabButton, IonTabs },
+  setup() {
+    return { call, person, settings }
+  }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/tab-button/readme.md b/core/src/components/tab-button/readme.md
index d323ec626f..0be3a3525e 100644
--- a/core/src/components/tab-button/readme.md
+++ b/core/src/components/tab-button/readme.md
@@ -192,27 +192,52 @@ export class TabButtonExample {
     <!-- Tab bar -->
     <ion-tab-bar slot="bottom">
       <ion-tab-button tab="schedule">
-        <ion-icon name="calendar"></ion-icon>
+        <ion-icon :icon="calendar"></ion-icon>
         <ion-label>Schedule</ion-label>
       </ion-tab-button>
 
       <ion-tab-button tab="speakers">
-        <ion-icon name="person-circle"></ion-icon>
+        <ion-icon :icon="person-circle"></ion-icon>
         <ion-label>Speakers</ion-label>
       </ion-tab-button>
 
       <ion-tab-button tab="map">
-        <ion-icon name="map"></ion-icon>
+        <ion-icon :icon="map"></ion-icon>
         <ion-label>Map</ion-label>
       </ion-tab-button>
 
       <ion-tab-button tab="about">
-        <ion-icon name="information-circle"></ion-icon>
+        <ion-icon :icon="informationCircle"></ion-icon>
         <ion-label>About</ion-label>
       </ion-tab-button>
     </ion-tab-bar>
   </ion-tabs>
 </template>
+
+<script>
+import { 
+  IonIcon, 
+  IonLabel, 
+  IonTabBar, 
+  IonTabButton, 
+  IonTabs
+} from '@ionic/vue';
+import { calendar, informationCircle, map, personCircle } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonIcon, 
+    IonLabel, 
+    IonTabBar, 
+    IonTabButton, 
+    IonTabs
+  },
+  setup() {
+    return { calendar, informationCircle, map, personCircle }
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/tab-button/usage/vue.md b/core/src/components/tab-button/usage/vue.md
index 651139f912..43b633f5b8 100644
--- a/core/src/components/tab-button/usage/vue.md
+++ b/core/src/components/tab-button/usage/vue.md
@@ -4,25 +4,50 @@
     <!-- Tab bar -->
     <ion-tab-bar slot="bottom">
       <ion-tab-button tab="schedule">
-        <ion-icon name="calendar"></ion-icon>
+        <ion-icon :icon="calendar"></ion-icon>
         <ion-label>Schedule</ion-label>
       </ion-tab-button>
 
       <ion-tab-button tab="speakers">
-        <ion-icon name="person-circle"></ion-icon>
+        <ion-icon :icon="person-circle"></ion-icon>
         <ion-label>Speakers</ion-label>
       </ion-tab-button>
 
       <ion-tab-button tab="map">
-        <ion-icon name="map"></ion-icon>
+        <ion-icon :icon="map"></ion-icon>
         <ion-label>Map</ion-label>
       </ion-tab-button>
 
       <ion-tab-button tab="about">
-        <ion-icon name="information-circle"></ion-icon>
+        <ion-icon :icon="informationCircle"></ion-icon>
         <ion-label>About</ion-label>
       </ion-tab-button>
     </ion-tab-bar>
   </ion-tabs>
 </template>
+
+<script>
+import { 
+  IonIcon, 
+  IonLabel, 
+  IonTabBar, 
+  IonTabButton, 
+  IonTabs
+} from '@ionic/vue';
+import { calendar, informationCircle, map, personCircle } from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonIcon, 
+    IonLabel, 
+    IonTabBar, 
+    IonTabButton, 
+    IonTabs
+  },
+  setup() {
+    return { calendar, informationCircle, map, personCircle }
+  }
+});
+</script>
 ```
diff --git a/core/src/components/textarea/readme.md b/core/src/components/textarea/readme.md
index 40395f912f..0ea3a05551 100644
--- a/core/src/components/textarea/readme.md
+++ b/core/src/components/textarea/readme.md
@@ -251,6 +251,15 @@ export class TextareaExample {
     <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
   </ion-item>
 </template>
+
+<script>
+import { IonItem, IonLabe, IonTextarea } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonLabe, IonTextarea }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/textarea/usage/vue.md b/core/src/components/textarea/usage/vue.md
index 4806200480..4621252fe3 100644
--- a/core/src/components/textarea/usage/vue.md
+++ b/core/src/components/textarea/usage/vue.md
@@ -36,4 +36,13 @@
     <ion-textarea rows="6" cols="20" placeholder="Enter any notes here..."></ion-textarea>
   </ion-item>
 </template>
+
+<script>
+import { IonItem, IonLabe, IonTextarea } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonLabe, IonTextarea }
+});
+</script>
 ```
diff --git a/core/src/components/thumbnail/readme.md b/core/src/components/thumbnail/readme.md
index 1c89a765cb..71976fa7f1 100644
--- a/core/src/components/thumbnail/readme.md
+++ b/core/src/components/thumbnail/readme.md
@@ -92,6 +92,15 @@ export class ThumbnailExample {
     <ion-label>Item Thumbnail</ion-label>
   </ion-item>
 </template>
+
+<script>
+import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonLabel, IonThumbnail }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/thumbnail/usage/vue.md b/core/src/components/thumbnail/usage/vue.md
index 6ea7a73a95..b7a3d8f3bd 100644
--- a/core/src/components/thumbnail/usage/vue.md
+++ b/core/src/components/thumbnail/usage/vue.md
@@ -11,4 +11,13 @@
     <ion-label>Item Thumbnail</ion-label>
   </ion-item>
 </template>
+
+<script>
+import { IonItem, IonLabel, IonThumbnail } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonItem, IonLabel, IonThumbnail }
+});
+</script>
 ```
\ No newline at end of file
diff --git a/core/src/components/title/readme.md b/core/src/components/title/readme.md
index 00b5a31f36..8b84b1a403 100644
--- a/core/src/components/title/readme.md
+++ b/core/src/components/title/readme.md
@@ -410,6 +410,15 @@ ion-title.large-title {
     <ion-title size="large">Large Title</ion-title>
   </ion-toolbar>
 </template>
+
+<script>
+import { IonTitle, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonTitle, IonToolbar }
+});
+</script>
 ```
 
 ### Collapsible Large Titles
@@ -418,13 +427,13 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
 
 ```html
 <template>
-  <ion-header translucent="true">
+  <ion-header :translucent="true">
     <ion-toolbar>
       <ion-title>Settings</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <ion-content fullscreen="true">
+  <ion-content :fullscreen="true">
     <ion-header collapse="condense">
       <ion-toolbar>
         <ion-title size="large">Settings</ion-title>
@@ -438,25 +447,46 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
 
   </ion-content>
 </template>
+
+<script>
+import { 
+  IonContent, 
+  IonHeader, 
+  IonSearchbar, 
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonContent, 
+    IonHeader, 
+    IonSearchbar, 
+    IonTitle, 
+    IonToolbar
+  }
+});
+</script>
 ```
 
 In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
 
 ```html
 <template>
-  <ion-header translucent="true">
+  <ion-header :translucent="true">
     <ion-toolbar>
-      <ion-buttons collapse="true" slot="end">
+      <ion-buttons :collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
       </ion-buttons>
       <ion-title>Settings</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <ion-content fullscreen="true">
+  <ion-content :fullscreen="true">
     <ion-header collapse="condense">
       <ion-toolbar>
-        <ion-buttons collapse="true" slot="end">
+        <ion-buttons :collapse="true" slot="end">
           <ion-button>Click Me</ion-button>
         </ion-buttons>
         <ion-title size="large">Settings</ion-title>
@@ -470,6 +500,31 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 
   </ion-content>
 </template>
+
+<script>
+import { 
+  IonButton,
+  IonButtons,
+  IonContent, 
+  IonHeader, 
+  IonSearchbar, 
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent, 
+    IonHeader, 
+    IonSearchbar, 
+    IonTitle, 
+    IonToolbar
+  }
+});
+</script>
 ```
 
 In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
diff --git a/core/src/components/title/usage/vue.md b/core/src/components/title/usage/vue.md
index ad2fbdf722..318656d126 100644
--- a/core/src/components/title/usage/vue.md
+++ b/core/src/components/title/usage/vue.md
@@ -18,6 +18,15 @@
     <ion-title size="large">Large Title</ion-title>
   </ion-toolbar>
 </template>
+
+<script>
+import { IonTitle, IonToolbar } from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: { IonTitle, IonToolbar }
+});
+</script>
 ```
 
 ### Collapsible Large Titles
@@ -26,13 +35,13 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
 
 ```html
 <template>
-  <ion-header translucent="true">
+  <ion-header :translucent="true">
     <ion-toolbar>
       <ion-title>Settings</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <ion-content fullscreen="true">
+  <ion-content :fullscreen="true">
     <ion-header collapse="condense">
       <ion-toolbar>
         <ion-title size="large">Settings</ion-title>
@@ -46,25 +55,46 @@ Ionic provides a way to create the collapsible titles that exist on stock iOS ap
 
   </ion-content>
 </template>
+
+<script>
+import { 
+  IonContent, 
+  IonHeader, 
+  IonSearchbar, 
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonContent, 
+    IonHeader, 
+    IonSearchbar, 
+    IonTitle, 
+    IonToolbar
+  }
+});
+</script>
 ```
 
 In the example above, notice there are two `ion-header` elements. The first `ion-header` represents the "collapsed" state of your collapsible header, and the second `ion-header` represents the "expanded" state of your collapsible header. Notice that the second `ion-header` must have `collapse="condense"` and must exist within `ion-content`. Additionally, in order to get the large title styling, `ion-title` must have `size="large"`.
 
 ```html
 <template>
-  <ion-header translucent="true">
+  <ion-header :translucent="true">
     <ion-toolbar>
-      <ion-buttons collapse="true" slot="end">
+      <ion-buttons :collapse="true" slot="end">
         <ion-button>Click Me</ion-button>
       </ion-buttons>
       <ion-title>Settings</ion-title>
     </ion-toolbar>
   </ion-header>
 
-  <ion-content fullscreen="true">
+  <ion-content :fullscreen="true">
     <ion-header collapse="condense">
       <ion-toolbar>
-        <ion-buttons collapse="true" slot="end">
+        <ion-buttons :collapse="true" slot="end">
           <ion-button>Click Me</ion-button>
         </ion-buttons>
         <ion-title size="large">Settings</ion-title>
@@ -78,6 +108,31 @@ In the example above, notice there are two `ion-header` elements. The first `ion
 
   </ion-content>
 </template>
+
+<script>
+import { 
+  IonButton,
+  IonButtons,
+  IonContent, 
+  IonHeader, 
+  IonSearchbar, 
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonButton,
+    IonButtons,
+    IonContent, 
+    IonHeader, 
+    IonSearchbar, 
+    IonTitle, 
+    IonToolbar
+  }
+});
+</script>
 ```
 
 In this example, notice that we have added two sets of `ion-buttons` both with `collapse` set to `true`. When the secondary header collapses, the buttons in the secondary header will hide, and the buttons in the primary header will show. This is useful for ensuring that your header buttons always appear next to an `ion-title` element.
diff --git a/core/src/components/toast/readme.md b/core/src/components/toast/readme.md
index 1f2c22e3af..e60e5cabea 100644
--- a/core/src/components/toast/readme.md
+++ b/core/src/components/toast/readme.md
@@ -215,6 +215,63 @@ export class ToastExample {
 ```
 
 
+### Vue
+
+```html
+<template>
+  <ion-page>
+    <ion-content class="ion-padding">
+      <ion-button @click="openToast">Open Toast</ion-button>
+      <ion-button @click="openToastOptions">Open Toast: Options</ion-button>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { IonButton, IonContent, IonPage, toastController } from '@ionic/vue';
+
+export default {
+  components: { IonButton, IonContent, IonPage },
+  methods: {
+    async openToast() {
+      const toast = await toastController
+        .create({
+          message: 'Your settings have been saved.',
+          duration: 2000
+        })
+      return toast.present();
+    },
+    async openToastOptions() {
+      const toast = await toastController
+        .create({
+          header: 'Toast header',
+          message: 'Click to Close',
+          position: 'top',
+          buttons: [
+            {
+              side: 'start',
+              icon: 'star',
+              text: 'Favorite',
+              handler: () => {
+                console.log('Favorite clicked');
+              }
+            }, {
+              text: 'Done',
+              role: 'cancel',
+              handler: () => {
+                console.log('Cancel clicked');
+              }
+            }
+          ]
+        })
+      return toast.present();
+    },
+  },
+}
+</script>
+```
+
+
 
 ## Properties
 
diff --git a/core/src/components/toast/usage/vue.md b/core/src/components/toast/usage/vue.md
new file mode 100644
index 0000000000..f0c5134151
--- /dev/null
+++ b/core/src/components/toast/usage/vue.md
@@ -0,0 +1,53 @@
+```html
+<template>
+  <ion-page>
+    <ion-content class="ion-padding">
+      <ion-button @click="openToast">Open Toast</ion-button>
+      <ion-button @click="openToastOptions">Open Toast: Options</ion-button>
+    </ion-content>
+  </ion-page>
+</template>
+
+<script>
+import { IonButton, IonContent, IonPage, toastController } from '@ionic/vue';
+
+export default {
+  components: { IonButton, IonContent, IonPage },
+  methods: {
+    async openToast() {
+      const toast = await toastController
+        .create({
+          message: 'Your settings have been saved.',
+          duration: 2000
+        })
+      return toast.present();
+    },
+    async openToastOptions() {
+      const toast = await toastController
+        .create({
+          header: 'Toast header',
+          message: 'Click to Close',
+          position: 'top',
+          buttons: [
+            {
+              side: 'start',
+              icon: 'star',
+              text: 'Favorite',
+              handler: () => {
+                console.log('Favorite clicked');
+              }
+            }, {
+              text: 'Done',
+              role: 'cancel',
+              handler: () => {
+                console.log('Cancel clicked');
+              }
+            }
+          ]
+        })
+      return toast.present();
+    },
+  },
+}
+</script>
+```
diff --git a/core/src/components/toggle/readme.md b/core/src/components/toggle/readme.md
index e62b91797e..138299b25a 100644
--- a/core/src/components/toggle/readme.md
+++ b/core/src/components/toggle/readme.md
@@ -393,18 +393,18 @@ export class ToggleExample {
     <ion-item>
       <ion-label>Pepperoni</ion-label>
       <ion-toggle
-        @ionChange="toppings.push($event.target.value)"
+        @ionChange="toppings.value.push($event.target.value)"
         value="pepperoni"
-        :checked="toppings.indexOf('pepperoni') !== -1">
+        :checked="toppings.value.indexOf('pepperoni') !== -1">
       </ion-toggle>
     </ion-item>
 
     <ion-item>
       <ion-label>Sausage</ion-label>
       <ion-toggle
-        @ionChange="toppings.push($event.target.value)"
+        @ionChange="toppings.value.push($event.target.value)"
         value="sausage"
-        :checked="toppings.indexOf('pepperoni') !== -1"
+        :checked="toppings.value.indexOf('pepperoni') !== -1"
         disabled="true">
       </ion-toggle>
     </ion-item>
@@ -412,13 +412,27 @@ export class ToggleExample {
     <ion-item>
       <ion-label>Mushrooms</ion-label>
       <ion-toggle
-        @ionChange="toppings.push($event.target.value)"
+        @ionChange="toppings.value.push($event.target.value)"
         value="mushrooms"
-        :checked="toppings.indexOf('pepperoni') !== -1">
+        :checked="toppings.value.indexOf('pepperoni') !== -1">
       </ion-toggle>
     </ion-item>
   </ion-list>
 </template>
+
+<script>
+import { IonLabel, IonList, IonItem, IonToggle } from '@ionic/vue';
+import { defineComponent, vue } from 'vue';
+
+export default defineComponent({
+  components: { IonLabel, IonList, IonItem, IonToggle },
+  setup() {
+    const toppings = ref([]);
+    
+    return { toppings };
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/toggle/usage/vue.md b/core/src/components/toggle/usage/vue.md
index dd2c5cad4a..4539f384d6 100644
--- a/core/src/components/toggle/usage/vue.md
+++ b/core/src/components/toggle/usage/vue.md
@@ -21,18 +21,18 @@
     <ion-item>
       <ion-label>Pepperoni</ion-label>
       <ion-toggle
-        @ionChange="toppings.push($event.target.value)"
+        @ionChange="toppings.value.push($event.target.value)"
         value="pepperoni"
-        :checked="toppings.indexOf('pepperoni') !== -1">
+        :checked="toppings.value.indexOf('pepperoni') !== -1">
       </ion-toggle>
     </ion-item>
 
     <ion-item>
       <ion-label>Sausage</ion-label>
       <ion-toggle
-        @ionChange="toppings.push($event.target.value)"
+        @ionChange="toppings.value.push($event.target.value)"
         value="sausage"
-        :checked="toppings.indexOf('pepperoni') !== -1"
+        :checked="toppings.value.indexOf('pepperoni') !== -1"
         disabled="true">
       </ion-toggle>
     </ion-item>
@@ -40,11 +40,25 @@
     <ion-item>
       <ion-label>Mushrooms</ion-label>
       <ion-toggle
-        @ionChange="toppings.push($event.target.value)"
+        @ionChange="toppings.value.push($event.target.value)"
         value="mushrooms"
-        :checked="toppings.indexOf('pepperoni') !== -1">
+        :checked="toppings.value.indexOf('pepperoni') !== -1">
       </ion-toggle>
     </ion-item>
   </ion-list>
 </template>
+
+<script>
+import { IonLabel, IonList, IonItem, IonToggle } from '@ionic/vue';
+import { defineComponent, vue } from 'vue';
+
+export default defineComponent({
+  components: { IonLabel, IonList, IonItem, IonToggle },
+  setup() {
+    const toppings = ref([]);
+    
+    return { toppings };
+  }
+});
+</script>
 ```
diff --git a/core/src/components/toolbar/readme.md b/core/src/components/toolbar/readme.md
index 7fcef9d7de..d37ac7a73d 100644
--- a/core/src/components/toolbar/readme.md
+++ b/core/src/components/toolbar/readme.md
@@ -732,15 +732,15 @@ export class ToolbarExample {
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
       </ion-button>
       <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="secondary">
-        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -749,7 +749,7 @@ export class ToolbarExample {
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button fill="solid">
-        <ion-icon slot="start" name="person-circle"></ion-icon>
+        <ion-icon slot="start" :icon="person-circle"></ion-icon>
         Contact
       </ion-button>
     </ion-buttons>
@@ -757,7 +757,7 @@ export class ToolbarExample {
     <ion-buttons slot="primary">
       <ion-button fill="solid" color="secondary">
         Help
-        <ion-icon slot="end" name="help-circle"></ion-icon>
+        <ion-icon slot="end" :icon="help-circle"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -765,7 +765,7 @@ export class ToolbarExample {
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button fill="outline">
-        <ion-icon slot="start" name="star"></ion-icon>
+        <ion-icon slot="start" :icon="star"></ion-icon>
         Star
       </ion-button>
     </ion-buttons>
@@ -773,7 +773,7 @@ export class ToolbarExample {
     <ion-buttons slot="primary">
       <ion-button color="danger" fill="outline">
         Edit
-        <ion-icon slot="end" name="create"></ion-icon>
+        <ion-icon slot="end" :icon="create"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -799,7 +799,7 @@ export class ToolbarExample {
     </ion-buttons>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="star"></ion-icon>
+        <ion-icon slot="icon-only" :icon="star"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Left side menu toggle</ion-title>
@@ -808,7 +808,7 @@ export class ToolbarExample {
   <ion-toolbar>
     <ion-buttons slot="primary">
       <ion-button @click="clickedStar()">
-        <ion-icon slot="icon-only" name="star"></ion-icon>
+        <ion-icon slot="icon-only" :icon="star"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
@@ -821,7 +821,7 @@ export class ToolbarExample {
   <ion-toolbar>
     <ion-buttons slot="primary">
       <ion-button @click="clickedSearch()">
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-searchbar placeholder="Search Favorites"></ion-searchbar>
@@ -841,15 +841,15 @@ export class ToolbarExample {
   <ion-toolbar color="secondary">
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
       </ion-button>
       <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="primary">
-        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Secondary Toolbar</ion-title>
@@ -858,20 +858,59 @@ export class ToolbarExample {
   <ion-toolbar color="dark">
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
       </ion-button>
       <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="danger">
-        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Dark Toolbar</ion-title>
   </ion-toolbar>
 </template>
+
+<script>
+import { 
+  IonButton, 
+  IonButtons, 
+  IonIcon,
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { 
+  ellipsisHorizontal,
+  ellipsisVertical, 
+  helpCircle, 
+  personCircle, 
+  search, 
+  star
+} from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonButton, 
+    IonButtons, 
+    IonIcon,
+    IonTitle, 
+    IonToolbar
+  },
+  setup() {
+    return {
+      ellipsisHorizontal,
+      ellipsisVertical, 
+      helpCircle, 
+      personCircle, 
+      search, 
+      star
+    }
+  }
+});
+</script>
 ```
 
 
diff --git a/core/src/components/toolbar/usage/vue.md b/core/src/components/toolbar/usage/vue.md
index 31fe0b3b63..4a31176de3 100644
--- a/core/src/components/toolbar/usage/vue.md
+++ b/core/src/components/toolbar/usage/vue.md
@@ -21,15 +21,15 @@
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
       </ion-button>
       <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="secondary">
-        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Default Buttons</ion-title>
@@ -38,7 +38,7 @@
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button fill="solid">
-        <ion-icon slot="start" name="person-circle"></ion-icon>
+        <ion-icon slot="start" :icon="person-circle"></ion-icon>
         Contact
       </ion-button>
     </ion-buttons>
@@ -46,7 +46,7 @@
     <ion-buttons slot="primary">
       <ion-button fill="solid" color="secondary">
         Help
-        <ion-icon slot="end" name="help-circle"></ion-icon>
+        <ion-icon slot="end" :icon="help-circle"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -54,7 +54,7 @@
   <ion-toolbar>
     <ion-buttons slot="secondary">
       <ion-button fill="outline">
-        <ion-icon slot="start" name="star"></ion-icon>
+        <ion-icon slot="start" :icon="star"></ion-icon>
         Star
       </ion-button>
     </ion-buttons>
@@ -62,7 +62,7 @@
     <ion-buttons slot="primary">
       <ion-button color="danger" fill="outline">
         Edit
-        <ion-icon slot="end" name="create"></ion-icon>
+        <ion-icon slot="end" :icon="create"></ion-icon>
       </ion-button>
     </ion-buttons>
   </ion-toolbar>
@@ -88,7 +88,7 @@
     </ion-buttons>
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="star"></ion-icon>
+        <ion-icon slot="icon-only" :icon="star"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Left side menu toggle</ion-title>
@@ -97,7 +97,7 @@
   <ion-toolbar>
     <ion-buttons slot="primary">
       <ion-button @click="clickedStar()">
-        <ion-icon slot="icon-only" name="star"></ion-icon>
+        <ion-icon slot="icon-only" :icon="star"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Right side menu toggle</ion-title>
@@ -110,7 +110,7 @@
   <ion-toolbar>
     <ion-buttons slot="primary">
       <ion-button @click="clickedSearch()">
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-searchbar placeholder="Search Favorites"></ion-searchbar>
@@ -130,15 +130,15 @@
   <ion-toolbar color="secondary">
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
       </ion-button>
       <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="primary">
-        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Secondary Toolbar</ion-title>
@@ -147,18 +147,57 @@
   <ion-toolbar color="dark">
     <ion-buttons slot="secondary">
       <ion-button>
-        <ion-icon slot="icon-only" name="person-circle"></ion-icon>
+        <ion-icon slot="icon-only" :icon="personCircle"></ion-icon>
       </ion-button>
       <ion-button>
-        <ion-icon slot="icon-only" name="search"></ion-icon>
+        <ion-icon slot="icon-only" :icon="search"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-buttons slot="primary">
       <ion-button color="danger">
-        <ion-icon slot="icon-only" ios="ellipsis-horizontal" md="ellipsis-vertical"></ion-icon>
+        <ion-icon slot="icon-only" :ios="ellipsisHorizontal" :md="ellipsisVertical"></ion-icon>
       </ion-button>
     </ion-buttons>
     <ion-title>Dark Toolbar</ion-title>
   </ion-toolbar>
 </template>
+
+<script>
+import { 
+  IonButton, 
+  IonButtons, 
+  IonIcon,
+  IonTitle, 
+  IonToolbar
+} from '@ionic/vue';
+import { 
+  ellipsisHorizontal,
+  ellipsisVertical, 
+  helpCircle, 
+  personCircle, 
+  search, 
+  star
+} from 'ionicons/icons';
+import { defineComponent } from 'vue';
+
+export default defineComponent({
+  components: {
+    IonButton, 
+    IonButtons, 
+    IonIcon,
+    IonTitle, 
+    IonToolbar
+  },
+  setup() {
+    return {
+      ellipsisHorizontal,
+      ellipsisVertical, 
+      helpCircle, 
+      personCircle, 
+      search, 
+      star
+    }
+  }
+});
+</script>
 ```
\ No newline at end of file