diff --git a/static/usage/v8/input/basic/vue.md b/static/usage/v8/input/basic/vue.md
index cfdca09244a..70dc672fef3 100644
--- a/static/usage/v8/input/basic/vue.md
+++ b/static/usage/v8/input/basic/vue.md
@@ -23,12 +23,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v8/input/clear/vue.md b/static/usage/v8/input/clear/vue.md
index e5cd540d469..ba7665b8850 100644
--- a/static/usage/v8/input/clear/vue.md
+++ b/static/usage/v8/input/clear/vue.md
@@ -34,12 +34,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
-  import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
+<script setup lang="ts">
+  import { IonInput, IonItem, IonList } from '@ionic/vue';  
 </script>
 ```
diff --git a/static/usage/v8/input/fill/vue.md b/static/usage/v8/input/fill/vue.md
index d1f2e440b05..b974339fb82 100644
--- a/static/usage/v8/input/fill/vue.md
+++ b/static/usage/v8/input/fill/vue.md
@@ -7,12 +7,7 @@
   <ion-input label="Outline input" label-placement="floating" fill="outline" placeholder="Enter text"></ion-input>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 ```
diff --git a/static/usage/v8/input/filtering/vue.md b/static/usage/v8/input/filtering/vue.md
index a95e5dcc843..2e6990ffe33 100644
--- a/static/usage/v8/input/filtering/vue.md
+++ b/static/usage/v8/input/filtering/vue.md
@@ -12,35 +12,28 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent, ref } from 'vue';
+  
+  const ionInputEl = ref();
+  const inputModel = ref('');
+  
+  const onInput = (ev) => {
+    const value = ev.target!.value;
 
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-    setup() {
-      const ionInputEl = ref();
-      const inputModel = ref('');
-      const onInput = (ev) => {
-        const value = ev.target!.value;
+    // Removes non alphanumeric characters
+    const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
 
-        // Removes non alphanumeric characters
-        const filteredValue = value.replace(/[^a-zA-Z0-9]+/g, '');
+    /**
+     * Update both the state variable and
+     * the component to keep them in sync.
+     */
+    inputModel.value = filteredValue;
 
-        /**
-         * Update both the state variable and
-         * the component to keep them in sync.
-         */
-        inputModel.value = filteredValue;
-
-        const inputCmp = ionInputEl.value;
-        if (inputCmp !== undefined) {
-          inputCmp.$el.value = filteredValue;
-        }
-      };
-
-      return { ionInputEl, inputModel, onInput };
-    },
-  });
+    const inputCmp = ionInputEl.value;
+    if (inputCmp !== undefined) {
+      inputCmp.$el.value = filteredValue;
+    }
+  };
 </script>
 ```
diff --git a/static/usage/v8/input/helper-error/vue.md b/static/usage/v8/input/helper-error/vue.md
index ce801d04ac7..6430da4c3b9 100644
--- a/static/usage/v8/input/helper-error/vue.md
+++ b/static/usage/v8/input/helper-error/vue.md
@@ -13,36 +13,41 @@
   ></ion-input>
 </template>
 
-<script lang="ts">
-  import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-    methods: {
-      validateEmail(email) {
-        return email.match(
-          /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
-        );
-      },
-
-      validate(ev) {
-        const value = ev.target.value;
-
-        this.$refs.input.$el.classList.remove('ion-valid');
-        this.$refs.input.$el.classList.remove('ion-invalid');
-
-        if (value === '') return;
-
-        this.validateEmail(value)
-          ? this.$refs.input.$el.classList.add('ion-valid')
-          : this.$refs.input.$el.classList.add('ion-invalid');
-      },
-
-      markTouched() {
-        this.$refs.input.$el.classList.add('ion-touched');
-      },
-    },
-  });
+<script setup lang="ts">
+import { ref } from 'vue';
+import { IonInput } from '@ionic/vue';
+
+const intput = ref<HTMLElement | null>(null);
+
+function validateEmail(email: string) {
+  return email.match(
+    /^(?=.{1,254}$)(?=.{1,64}@)[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+(?:\.[a-zA-Z0-9!#$%&'*+/=?^_`{|}~-]+)*@[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?(?:\.[a-zA-Z0-9](?:[a-zA-Z0-9-]{0,61}[a-zA-Z0-9])?)*$/
+  ) !== null;
+}
+
+function validate(ev: Event) {
+  const target = ev.target as HTMLInputElement;
+  const value = target.value;
+
+  if (!intput.value) return;
+
+  const inputElement = intput.value;
+
+  inputElement.classList.remove('ion-valid');
+  inputElement.classList.remove('ion-invalid');
+
+  if (value === '') return;
+
+  if (validateEmail(value)) {
+    inputElement.classList.add('ion-valid');
+  } else {
+    inputElement.classList.add('ion-invalid');
+  }
+}
+
+function markTouched() {
+  if (!intput.value) return;
+  intput.value.classList.add('ion-touched');
+}
 </script>
 ```
diff --git a/static/usage/v8/input/label-placement/vue.md b/static/usage/v8/input/label-placement/vue.md
index 8854647965d..628492195a3 100644
--- a/static/usage/v8/input/label-placement/vue.md
+++ b/static/usage/v8/input/label-placement/vue.md
@@ -19,12 +19,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v8/input/label-slot/vue.md b/static/usage/v8/input/label-slot/vue.md
index 4b3fb3daeb8..97906146a2e 100644
--- a/static/usage/v8/input/label-slot/vue.md
+++ b/static/usage/v8/input/label-slot/vue.md
@@ -9,12 +9,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList, IonText } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList, IonText },
-  });
 </script>
 ```
diff --git a/static/usage/v8/input/no-visible-label/vue.md b/static/usage/v8/input/no-visible-label/vue.md
index cc181047943..ceaa97a294b 100644
--- a/static/usage/v8/input/no-visible-label/vue.md
+++ b/static/usage/v8/input/no-visible-label/vue.md
@@ -7,12 +7,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput, IonItem, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput, IonItem, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v8/input/start-end-slots/vue.md b/static/usage/v8/input/start-end-slots/vue.md
index 76380eb566a..77f2a5d472b 100644
--- a/static/usage/v8/input/start-end-slots/vue.md
+++ b/static/usage/v8/input/start-end-slots/vue.md
@@ -12,22 +12,8 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonButton, IonIcon, IonInput, IonItem, IonList } from '@ionic/vue';
   import { eye, lockClosed } from 'ionicons/icons';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: {
-      IonButton,
-      IonIcon,
-      IonInput,
-      IonItem,
-      IonList,
-    },
-    setup() {
-      return { eye, lockClosed };
-    },
-  });
 </script>
 ```
diff --git a/static/usage/v8/input/theming/colors/vue.md b/static/usage/v8/input/theming/colors/vue.md
index e9d3a4e0ef4..60968a1cd27 100644
--- a/static/usage/v8/input/theming/colors/vue.md
+++ b/static/usage/v8/input/theming/colors/vue.md
@@ -11,12 +11,7 @@
   <ion-input aria-label="Dark input" color="dark" placeholder="Dark input"></ion-input>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 ```
diff --git a/static/usage/v8/input/theming/css-properties/vue.md b/static/usage/v8/input/theming/css-properties/vue.md
index 77ab74eeeab..71f9ab13376 100644
--- a/static/usage/v8/input/theming/css-properties/vue.md
+++ b/static/usage/v8/input/theming/css-properties/vue.md
@@ -10,13 +10,8 @@
   ></ion-input>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonInput } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonInput },
-  });
 </script>
 
 <style>
diff --git a/static/usage/v8/item-divider/basic/vue.md b/static/usage/v8/item-divider/basic/vue.md
index 22c9565c278..6d182a324fe 100644
--- a/static/usage/v8/item-divider/basic/vue.md
+++ b/static/usage/v8/item-divider/basic/vue.md
@@ -35,12 +35,7 @@
   </ion-list>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItem, IonItemDivider, IonItemGroup, IonLabel, IonList },
-  });
 </script>
 ```
diff --git a/static/usage/v8/item-divider/theming/colors/vue.md b/static/usage/v8/item-divider/theming/colors/vue.md
index 981f99a09da..60f964551f5 100644
--- a/static/usage/v8/item-divider/theming/colors/vue.md
+++ b/static/usage/v8/item-divider/theming/colors/vue.md
@@ -32,12 +32,7 @@
   </ion-item-divider>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItemDivider, IonLabel } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItemDivider, IonLabel },
-  });
 </script>
 ```
diff --git a/static/usage/v8/item-divider/theming/css-properties/vue.md b/static/usage/v8/item-divider/theming/css-properties/vue.md
index 950e3775d83..2a6776fcb76 100644
--- a/static/usage/v8/item-divider/theming/css-properties/vue.md
+++ b/static/usage/v8/item-divider/theming/css-properties/vue.md
@@ -5,13 +5,8 @@
   </ion-item-divider>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
   import { IonItemDivider } from '@ionic/vue';
-  import { defineComponent } from 'vue';
-
-  export default defineComponent({
-    components: { IonItemDivider },
-  });
 </script>
 
 <style scoped>