diff --git a/vue/base/package.json b/vue/base/package.json
index e4f2457eb..53b878ad1 100644
--- a/vue/base/package.json
+++ b/vue/base/package.json
@@ -28,13 +28,13 @@
     "@vue/cli-plugin-typescript": "~5.0.0-rc.1",
     "@vue/cli-plugin-unit-jest": "~5.0.0-rc.1",
     "@vue/cli-service": "~5.0.0-rc.1",
-    "@vue/eslint-config-typescript": "^9.1.0",
+    "@vue/eslint-config-typescript": "^11.0.2",
     "@vue/test-utils": "^2.0.0-rc.16",
     "@vue/vue3-jest": "^27.0.0-alpha.3",
     "babel-jest": "^27.3.1",
     "cypress": "^8.7.0",
     "eslint": "^8.4.1",
-    "eslint-plugin-vue": "^8.2.0",
+    "eslint-plugin-vue": "^9.8.0",
     "jest": "^27.3.1",
     "ts-jest": "^27.0.7",
     "typescript": "^4.3.5"
diff --git a/vue/official/blank/src/App.vue b/vue/official/blank/src/App.vue
index 1e0109170..30dd4068e 100644
--- a/vue/official/blank/src/App.vue
+++ b/vue/official/blank/src/App.vue
@@ -4,15 +4,6 @@
   </ion-app>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    IonApp,
-    IonRouterOutlet
-  }
-});
-</script>
\ No newline at end of file
+</script>
diff --git a/vue/official/blank/src/views/HomePage.vue b/vue/official/blank/src/views/HomePage.vue
index 9d5b65960..13920942b 100644
--- a/vue/official/blank/src/views/HomePage.vue
+++ b/vue/official/blank/src/views/HomePage.vue
@@ -5,14 +5,14 @@
         <ion-title>Blank</ion-title>
       </ion-toolbar>
     </ion-header>
-    
+
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
           <ion-title size="large">Blank</ion-title>
         </ion-toolbar>
       </ion-header>
-    
+
       <div id="container">
         <strong>Ready to create an app?</strong>
         <p>Start with Ionic <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
@@ -21,20 +21,8 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'HomePage',
-  components: {
-    IonContent,
-    IonHeader,
-    IonPage,
-    IonTitle,
-    IonToolbar
-  }
-});
 </script>
 
 <style scoped>
diff --git a/vue/official/list/src/App.vue b/vue/official/list/src/App.vue
index 1e0109170..30dd4068e 100644
--- a/vue/official/list/src/App.vue
+++ b/vue/official/list/src/App.vue
@@ -4,15 +4,6 @@
   </ion-app>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    IonApp,
-    IonRouterOutlet
-  }
-});
-</script>
\ No newline at end of file
+</script>
diff --git a/vue/official/list/src/components/MessageListItem.vue b/vue/official/list/src/components/MessageListItem.vue
index 841428e5b..aad69e30b 100644
--- a/vue/official/list/src/components/MessageListItem.vue
+++ b/vue/official/list/src/components/MessageListItem.vue
@@ -17,32 +17,18 @@
   </ion-item>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { IonIcon, IonItem, IonLabel, IonNote } from '@ionic/vue';
 import { chevronForward } from 'ionicons/icons';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-  name: 'MessageListItem',
-  components: {
-    IonIcon,
-    IonItem,
-    IonLabel,
-    IonNote,
-  },
-  props: {
-    message: Object,
-  },
-  methods: {
-    isIos: () => {
-      const win = window as any;
-      return win && win.Ionic && win.Ionic.mode === 'ios';
-    }
-  },
-  data() {
-    return { chevronForward }
-  }
+defineProps({
+  message: Object,
 });
+
+const isIos = () => {
+  const win = window as any;
+  return win && win.Ionic && win.Ionic.mode === 'ios';
+};
 </script>
 
 <style scoped>
@@ -56,7 +42,7 @@ export default defineComponent({
   margin-bottom: 12px;
 }
 
-.list-item  h2 {
+.list-item h2 {
   font-weight: 600;
   margin: 0;
 }
@@ -100,4 +86,4 @@ export default defineComponent({
 .list-item .dot-unread {
   background: var(--ion-color-primary);
 }
-</style>
\ No newline at end of file
+</style>
diff --git a/vue/official/list/src/views/HomePage.vue b/vue/official/list/src/views/HomePage.vue
index 40ceaa73e..e08d168fb 100644
--- a/vue/official/list/src/views/HomePage.vue
+++ b/vue/official/list/src/views/HomePage.vue
@@ -5,18 +5,18 @@
         <ion-title>Inbox</ion-title>
       </ion-toolbar>
     </ion-header>
-    
+
     <ion-content :fullscreen="true">
       <ion-refresher slot="fixed" @ionRefresh="refresh($event)">
         <ion-refresher-content></ion-refresher-content>
       </ion-refresher>
-      
+
       <ion-header collapse="condense">
         <ion-toolbar>
           <ion-title size="large">Inbox</ion-title>
         </ion-toolbar>
       </ion-header>
-      
+
       <ion-list>
         <MessageListItem v-for="message in messages" :key="message.id" :message="message" />
       </ion-list>
@@ -24,36 +24,26 @@
   </ion-page>
 </template>
 
-<script lang="ts">
-import { IonContent, IonHeader, IonList, IonPage, IonRefresher, IonRefresherContent, IonTitle, IonToolbar } from '@ionic/vue';
+<script setup lang="ts">
+import {
+  IonContent,
+  IonHeader,
+  IonList,
+  IonPage,
+  IonRefresher,
+  IonRefresherContent,
+  IonTitle,
+  IonToolbar,
+} from '@ionic/vue';
 import MessageListItem from '@/components/MessageListItem.vue';
-import { defineComponent } from 'vue';
-import { getMessages } from '@/data/messages';
+import { getMessages, Message } from '@/data/messages';
+import { ref } from 'vue';
+
+const messages = ref<Message[]>(getMessages());
 
-export default defineComponent({
-  name: 'HomePage',
-  data() {
-    return {
-      messages: getMessages()
-    }
-  },
-  methods: {
-    refresh: (ev: CustomEvent) => {
-      setTimeout(() => {
-        ev.detail.complete();
-      }, 3000);
-    }
-  },
-  components: {
-    IonContent,
-    IonHeader,
-    IonList,
-    IonPage,
-    IonRefresher,
-    IonRefresherContent,
-    IonTitle,
-    IonToolbar,
-    MessageListItem
-  },
-});
+const refresh = (ev: CustomEvent) => {
+  setTimeout(() => {
+    ev.detail.complete();
+  }, 3000);
+};
 </script>
diff --git a/vue/official/list/src/views/ViewMessagePage.vue b/vue/official/list/src/views/ViewMessagePage.vue
index 43e1c6591..6bf02d2be 100644
--- a/vue/official/list/src/views/ViewMessagePage.vue
+++ b/vue/official/list/src/views/ViewMessagePage.vue
@@ -7,7 +7,7 @@
         </ion-buttons>
       </ion-toolbar>
     </ion-header>
-    
+
     <ion-content :fullscreen="true" v-if="message">
       <ion-item>
         <ion-icon :icon="personCircle" color="primary"></ion-icon>
@@ -21,7 +21,7 @@
           <h3>To: <ion-note>Me</ion-note></h3>
         </ion-label>
       </ion-item>
-      
+
       <div class="ion-padding">
         <h1>{{ message.subject }}</h1>
         <p>
@@ -32,44 +32,31 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { useRoute } from 'vue-router';
-import { IonBackButton, IonButtons, IonContent, IonHeader, IonIcon, IonItem, IonLabel, IonNote, IonPage, IonToolbar } from '@ionic/vue';
+import {
+  IonBackButton,
+  IonButtons,
+  IonContent,
+  IonHeader,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonNote,
+  IonPage,
+  IonToolbar,
+} from '@ionic/vue';
 import { personCircle } from 'ionicons/icons';
 import { getMessage } from '../data/messages';
-import { defineComponent } from 'vue';
 
-export default defineComponent({
-  name: 'ViewMessagePage',
-  data() {
-    return {
-      personCircle,
-      getBackButtonText: () => {
-        const win = window as any;
-        const mode = win && win.Ionic && win.Ionic.mode;
-        return mode === 'ios' ? 'Inbox' : '';
-      }
-    }
-  },
-  setup() {
-    const route = useRoute();
-    const message = getMessage(parseInt(route.params.id as string, 10));
+const getBackButtonText = () => {
+  const win = window as any;
+  const mode = win && win.Ionic && win.Ionic.mode;
+  return mode === 'ios' ? 'Inbox' : '';
+};
 
-    return { message }
-  },
-  components: {
-    IonBackButton,
-    IonButtons,
-    IonContent,
-    IonHeader,
-    IonIcon,
-    IonItem,
-    IonLabel,
-    IonNote,
-    IonPage,
-    IonToolbar,
-  },
-});
+const route = useRoute();
+const message = getMessage(parseInt(route.params.id as string, 10));
 </script>
 
 <style scoped>
diff --git a/vue/official/sidemenu/src/App.vue b/vue/official/sidemenu/src/App.vue
index 5b777187d..6a0bd16bc 100644
--- a/vue/official/sidemenu/src/App.vue
+++ b/vue/official/sidemenu/src/App.vue
@@ -6,7 +6,7 @@
           <ion-list id="inbox-list">
             <ion-list-header>Inbox</ion-list-header>
             <ion-note>hi@ionicframework.com</ion-note>
-  
+
             <ion-menu-toggle auto-hide="false" v-for="(p, i) in appPages" :key="i">
               <ion-item @click="selectedIndex = i" router-direction="root" :router-link="p.url" lines="none" detail="false" class="hydrated" :class="{ selected: selectedIndex === i }">
                 <ion-icon slot="start" :ios="p.iosIcon" :md="p.mdIcon"></ion-icon>
@@ -14,10 +14,10 @@
               </ion-item>
             </ion-menu-toggle>
           </ion-list>
-  
+
           <ion-list id="labels-list">
             <ion-list-header>Labels</ion-list-header>
-  
+
             <ion-item v-for="(label, index) in labels" lines="none" :key="index">
               <ion-icon slot="start" :ios="bookmarkOutline" :md="bookmarkSharp"></ion-icon>
               <ion-label>{{ label }}</ion-label>
@@ -30,99 +30,84 @@
   </ion-app>
 </template>
 
-<script lang="ts">
-import { IonApp, IonContent, IonIcon, IonItem, IonLabel, IonList, IonListHeader, IonMenu, IonMenuToggle, IonNote, IonRouterOutlet, IonSplitPane } from '@ionic/vue';
-import { defineComponent, ref } from 'vue';
-import { useRoute } from 'vue-router';
-import { archiveOutline, archiveSharp, bookmarkOutline, bookmarkSharp, heartOutline, heartSharp, mailOutline, mailSharp, paperPlaneOutline, paperPlaneSharp, trashOutline, trashSharp, warningOutline, warningSharp } from 'ionicons/icons';
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    IonApp, 
-    IonContent, 
-    IonIcon, 
-    IonItem, 
-    IonLabel, 
-    IonList, 
-    IonListHeader, 
-    IonMenu, 
-    IonMenuToggle, 
-    IonNote, 
-    IonRouterOutlet, 
-    IonSplitPane,
+<script setup lang="ts">
+import {
+  IonApp,
+  IonContent,
+  IonIcon,
+  IonItem,
+  IonLabel,
+  IonList,
+  IonListHeader,
+  IonMenu,
+  IonMenuToggle,
+  IonNote,
+  IonRouterOutlet,
+  IonSplitPane,
+} from '@ionic/vue';
+import { ref } from 'vue';
+import {
+  archiveOutline,
+  archiveSharp,
+  bookmarkOutline,
+  bookmarkSharp,
+  heartOutline,
+  heartSharp,
+  mailOutline,
+  mailSharp,
+  paperPlaneOutline,
+  paperPlaneSharp,
+  trashOutline,
+  trashSharp,
+  warningOutline,
+  warningSharp,
+} from 'ionicons/icons';
+
+const selectedIndex = ref(0);
+const appPages = [
+  {
+    title: 'Inbox',
+    url: '/folder/Inbox',
+    iosIcon: mailOutline,
+    mdIcon: mailSharp,
+  },
+  {
+    title: 'Outbox',
+    url: '/folder/Outbox',
+    iosIcon: paperPlaneOutline,
+    mdIcon: paperPlaneSharp,
+  },
+  {
+    title: 'Favorites',
+    url: '/folder/Favorites',
+    iosIcon: heartOutline,
+    mdIcon: heartSharp,
   },
-  setup() {
-    const selectedIndex = ref(0);
-    const appPages = [
-      {
-        title: 'Inbox',
-        url: '/folder/Inbox',
-        iosIcon: mailOutline,
-        mdIcon: mailSharp
-      },
-      {
-        title: 'Outbox',
-        url: '/folder/Outbox',
-        iosIcon: paperPlaneOutline,
-        mdIcon: paperPlaneSharp
-      },
-      {
-        title: 'Favorites',
-        url: '/folder/Favorites',
-        iosIcon: heartOutline,
-        mdIcon: heartSharp
-      },
-      {
-        title: 'Archived',
-        url: '/folder/Archived',
-        iosIcon: archiveOutline,
-        mdIcon: archiveSharp
-      },
-      {
-        title: 'Trash',
-        url: '/folder/Trash',
-        iosIcon: trashOutline,
-        mdIcon: trashSharp
-      },
-      {
-        title: 'Spam',
-        url: '/folder/Spam',
-        iosIcon: warningOutline,
-        mdIcon: warningSharp
-      }
-    ];
-    const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
-    
-    const path = window.location.pathname.split('folder/')[1];
-    if (path !== undefined) {
-      selectedIndex.value = appPages.findIndex(page => page.title.toLowerCase() === path.toLowerCase());
-    }
-    
-    const route = useRoute();
-    
-    return { 
-      selectedIndex,
-      appPages, 
-      labels,
-      archiveOutline, 
-      archiveSharp, 
-      bookmarkOutline, 
-      bookmarkSharp, 
-      heartOutline, 
-      heartSharp, 
-      mailOutline, 
-      mailSharp, 
-      paperPlaneOutline, 
-      paperPlaneSharp, 
-      trashOutline, 
-      trashSharp, 
-      warningOutline, 
-      warningSharp,
-      isSelected: (url: string) => url === route.path ? 'selected' : ''
-    }
-  }
-});
+  {
+    title: 'Archived',
+    url: '/folder/Archived',
+    iosIcon: archiveOutline,
+    mdIcon: archiveSharp,
+  },
+  {
+    title: 'Trash',
+    url: '/folder/Trash',
+    iosIcon: trashOutline,
+    mdIcon: trashSharp,
+  },
+  {
+    title: 'Spam',
+    url: '/folder/Spam',
+    iosIcon: warningOutline,
+    mdIcon: warningSharp,
+  },
+];
+const labels = ['Family', 'Friends', 'Notes', 'Work', 'Travel', 'Reminders'];
+
+const path = window.location.pathname.split('folder/')[1];
+if (path !== undefined) {
+  selectedIndex.value = appPages.findIndex((page) => page.title.toLowerCase() === path.toLowerCase());
+}
 </script>
 
 <style scoped>
diff --git a/vue/official/sidemenu/src/views/FolderPage.vue b/vue/official/sidemenu/src/views/FolderPage.vue
index db0f8201b..613079ce2 100644
--- a/vue/official/sidemenu/src/views/FolderPage.vue
+++ b/vue/official/sidemenu/src/views/FolderPage.vue
@@ -8,14 +8,14 @@
         <ion-title>{{ $route.params.id }}</ion-title>
       </ion-toolbar>
     </ion-header>
-    
+
     <ion-content :fullscreen="true">
       <ion-header collapse="condense">
         <ion-toolbar>
           <ion-title size="large">{{ $route.params.id }}</ion-title>
         </ion-toolbar>
       </ion-header>
-    
+
       <div id="container">
         <strong class="capitalize">{{ $route.params.id }}</strong>
         <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
@@ -24,22 +24,8 @@
   </ion-page>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { IonButtons, IonContent, IonHeader, IonMenuButton, IonPage, IonTitle, IonToolbar } from '@ionic/vue';
-
-export default defineComponent({
-  name: 'FolderPage',
-  components: {
-    IonButtons,
-    IonContent,
-    IonHeader,
-    IonMenuButton,
-    IonPage,
-    IonTitle,
-    IonToolbar
-  }
-});
 </script>
 
 <style scoped>
diff --git a/vue/official/tabs/src/App.vue b/vue/official/tabs/src/App.vue
index 1e0109170..30dd4068e 100644
--- a/vue/official/tabs/src/App.vue
+++ b/vue/official/tabs/src/App.vue
@@ -4,15 +4,6 @@
   </ion-app>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import { IonApp, IonRouterOutlet } from '@ionic/vue';
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'App',
-  components: {
-    IonApp,
-    IonRouterOutlet
-  }
-});
-</script>
\ No newline at end of file
+</script>
diff --git a/vue/official/tabs/src/components/ExploreContainer.vue b/vue/official/tabs/src/components/ExploreContainer.vue
index 505a6fb93..6b1376047 100644
--- a/vue/official/tabs/src/components/ExploreContainer.vue
+++ b/vue/official/tabs/src/components/ExploreContainer.vue
@@ -5,14 +5,9 @@
   </div>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
-
-export default defineComponent({
-  name: 'ExploreContainer',
-  props: {
-    name: String
-  }
+<script setup lang="ts">
+defineProps({
+  name: String,
 });
 </script>
 
diff --git a/vue/official/tabs/src/views/Tab1Page.vue b/vue/official/tabs/src/views/Tab1Page.vue
index 52a475553..0a872661e 100644
--- a/vue/official/tabs/src/views/Tab1Page.vue
+++ b/vue/official/tabs/src/views/Tab1Page.vue
@@ -11,19 +11,13 @@
           <ion-title size="large">Tab 1</ion-title>
         </ion-toolbar>
       </ion-header>
-    
+
       <ExploreContainer name="Tab 1 page" />
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
-
-export default  defineComponent({
-  name: 'Tab1Page',
-  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
-});
 </script>
diff --git a/vue/official/tabs/src/views/Tab2Page.vue b/vue/official/tabs/src/views/Tab2Page.vue
index cdf9a7d3b..d34c21295 100644
--- a/vue/official/tabs/src/views/Tab2Page.vue
+++ b/vue/official/tabs/src/views/Tab2Page.vue
@@ -11,19 +11,13 @@
           <ion-title size="large">Tab 2</ion-title>
         </ion-toolbar>
       </ion-header>
-      
+
       <ExploreContainer name="Tab 2 page" />
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
-
-export default defineComponent({
-  name: 'Tab2Page',
-  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
-});
 </script>
diff --git a/vue/official/tabs/src/views/Tab3Page.vue b/vue/official/tabs/src/views/Tab3Page.vue
index 62d856516..d8bbeb069 100644
--- a/vue/official/tabs/src/views/Tab3Page.vue
+++ b/vue/official/tabs/src/views/Tab3Page.vue
@@ -11,19 +11,13 @@
           <ion-title size="large">Tab 3</ion-title>
         </ion-toolbar>
       </ion-header>
-      
+
       <ExploreContainer name="Tab 3 page" />
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { IonPage, IonHeader, IonToolbar, IonTitle, IonContent } from '@ionic/vue';
 import ExploreContainer from '@/components/ExploreContainer.vue';
-
-export default defineComponent({
-  name: 'Tab3Page',
-  components: { ExploreContainer, IonHeader, IonToolbar, IonTitle, IonContent, IonPage }
-});
 </script>
diff --git a/vue/official/tabs/src/views/TabsPage.vue b/vue/official/tabs/src/views/TabsPage.vue
index b4c107a46..8461fcb72 100644
--- a/vue/official/tabs/src/views/TabsPage.vue
+++ b/vue/official/tabs/src/views/TabsPage.vue
@@ -7,12 +7,12 @@
           <ion-icon :icon="triangle" />
           <ion-label>Tab 1</ion-label>
         </ion-tab-button>
-          
+
         <ion-tab-button tab="tab2" href="/tabs/tab2">
           <ion-icon :icon="ellipse" />
           <ion-label>Tab 2</ion-label>
         </ion-tab-button>
-        
+
         <ion-tab-button tab="tab3" href="/tabs/tab3">
           <ion-icon :icon="square" />
           <ion-label>Tab 3</ion-label>
@@ -22,20 +22,7 @@
   </ion-page>
 </template>
 
-<script lang="ts">
-import { defineComponent } from 'vue';
+<script setup lang="ts">
 import { IonTabBar, IonTabButton, IonTabs, IonLabel, IonIcon, IonPage, IonRouterOutlet } from '@ionic/vue';
 import { ellipse, square, triangle } from 'ionicons/icons';
-
-export default defineComponent({
-  name: 'TabsPage',
-  components: { IonLabel, IonTabs, IonTabBar, IonTabButton, IonIcon, IonPage, IonRouterOutlet },
-  setup() {
-    return {
-      ellipse, 
-      square, 
-      triangle,
-    }
-  }
-});
 </script>