From 2229c24bf502700084ee508a584bfd70cef83d6a Mon Sep 17 00:00:00 2001
From: Brandy Smith <brandyscarney@users.noreply.github.com>
Date: Fri, 8 Aug 2025 13:37:39 -0400
Subject: [PATCH] test(vue): improve test app (#30610)

Co-authored-by: Brandy Smith <6577830+brandyscarney@users.noreply.github.com>
---
 packages/vue/test/base/index.html             |   7 +-
 packages/vue/test/base/public/favicon.png     | Bin 0 -> 930 bytes
 .../test/base/src/components/ModalContent.vue |   2 +-
 .../vue/test/base/src/components/NavChild.vue |   2 +-
 .../vue/test/base/src/components/NavRoot.vue  |   2 +-
 packages/vue/test/base/src/main.ts            |  11 +
 packages/vue/test/base/src/router/index.ts    |  32 ++-
 .../vue/test/base/src/theme/variables.css     | 232 +-----------------
 .../vue/test/base/src/views/Breadcrumbs.vue   |  26 +-
 .../vue/test/base/src/views/Components.vue    |  26 --
 .../vue/test/base/src/views/DefaultHref.vue   |   2 +-
 packages/vue/test/base/src/views/Home.vue     |  60 +++--
 packages/vue/test/base/src/views/Icons.vue    |   4 +-
 packages/vue/test/base/src/views/Inputs.vue   |   4 +-
 .../vue/test/base/src/views/Lifecycle.vue     |   4 +-
 .../test/base/src/views/LifecycleSetup.vue    |   4 +-
 .../vue/test/base/src/views/Navigation.vue    |   4 +-
 packages/vue/test/base/src/views/Overlays.vue | 107 ++++----
 .../src/views/OverlaysKeepContentsMounted.vue |   2 +-
 packages/vue/test/base/src/views/Range.vue    |   7 +
 .../vue/test/base/src/views/ReorderGroup.vue  |   2 +-
 packages/vue/test/base/src/views/Routing.vue  |   4 +-
 .../vue/test/base/src/views/RoutingChild.vue  |   4 +-
 .../test/base/src/views/RoutingParameter.vue  |   4 +-
 .../base/src/views/RoutingParameterView.vue   |   4 +-
 packages/vue/test/base/src/views/Select.vue   |   7 +
 packages/vue/test/base/src/views/Template.vue |   2 +-
 .../vue/test/base/src/views/VersionTest.vue   |   4 +-
 .../base/src/views/{ => nested}/Folder.vue    |   0
 .../src/views/{ => nested}/NestedChild.vue    |   2 +-
 .../src/views/{ => nested}/NestedChildTwo.vue |   2 +-
 .../src/views/{ => nested}/RouterOutlet.vue   |   2 +-
 .../{ => tabs-secondary}/Tab1Secondary.vue    |   2 +-
 .../{ => tabs-secondary}/Tab2Secondary.vue    |   0
 .../{ => tabs-secondary}/Tab3Secondary.vue    |   0
 .../{ => tabs-secondary}/TabsSecondary.vue    |   0
 .../test/base/src/views/{ => tabs}/Tab1.vue   |   2 +-
 .../src/views/{ => tabs}/Tab1Parameter.vue    |   2 +-
 .../test/base/src/views/{ => tabs}/Tab2.vue   |   2 +-
 .../test/base/src/views/{ => tabs}/Tab3.vue   |   0
 .../test/base/src/views/{ => tabs}/Tab4.vue   |   0
 .../test/base/src/views/{ => tabs}/Tabs.vue   |   2 +-
 .../test/base/tests/e2e/specs/routing.cy.js   |   8 +-
 .../vue/test/base/tests/e2e/specs/tabs.cy.js  |  12 +-
 packages/vue/test/base/vite.config.js         |   3 +
 45 files changed, 193 insertions(+), 415 deletions(-)
 create mode 100644 packages/vue/test/base/public/favicon.png
 delete mode 100644 packages/vue/test/base/src/views/Components.vue
 rename packages/vue/test/base/src/views/{ => nested}/Folder.vue (100%)
 rename packages/vue/test/base/src/views/{ => nested}/NestedChild.vue (96%)
 rename packages/vue/test/base/src/views/{ => nested}/NestedChildTwo.vue (96%)
 rename packages/vue/test/base/src/views/{ => nested}/RouterOutlet.vue (95%)
 rename packages/vue/test/base/src/views/{ => tabs-secondary}/Tab1Secondary.vue (96%)
 rename packages/vue/test/base/src/views/{ => tabs-secondary}/Tab2Secondary.vue (100%)
 rename packages/vue/test/base/src/views/{ => tabs-secondary}/Tab3Secondary.vue (100%)
 rename packages/vue/test/base/src/views/{ => tabs-secondary}/TabsSecondary.vue (100%)
 rename packages/vue/test/base/src/views/{ => tabs}/Tab1.vue (97%)
 rename packages/vue/test/base/src/views/{ => tabs}/Tab1Parameter.vue (96%)
 rename packages/vue/test/base/src/views/{ => tabs}/Tab2.vue (96%)
 rename packages/vue/test/base/src/views/{ => tabs}/Tab3.vue (100%)
 rename packages/vue/test/base/src/views/{ => tabs}/Tab4.vue (100%)
 rename packages/vue/test/base/src/views/{ => tabs}/Tabs.vue (98%)

diff --git a/packages/vue/test/base/index.html b/packages/vue/test/base/index.html
index 670de7a9a8..82d60435c5 100644
--- a/packages/vue/test/base/index.html
+++ b/packages/vue/test/base/index.html
@@ -14,18 +14,17 @@
     <meta name="format-detection" content="telephone=no" />
     <meta name="msapplication-tap-highlight" content="no" />
 
-    <link rel="shortcut icon" type="image/png" href="/assets/icon/favicon.png" />
+    <link rel="shortcut icon" type="image/png" href="/favicon.png" />
 
     <!-- add to homescreen for ios -->
-    <meta name="apple-mobile-web-app-capable" content="yes" />
+    <meta name="mobile-web-app-capable" content="yes" />
     <meta name="apple-mobile-web-app-title" content="Ionic App" />
     <meta name="apple-mobile-web-app-status-bar-style" content="black" />
-
-    <script type="module" src="/src/main.ts"></script>
   </head>
 
   <body>
     <div id="app"></div>
+    <script type="module" src="/src/main.ts"></script>
   </body>
 
 </html>
diff --git a/packages/vue/test/base/public/favicon.png b/packages/vue/test/base/public/favicon.png
new file mode 100644
index 0000000000000000000000000000000000000000..51888a7bbdb59f04c29c548523eb2638c1c954f5
GIT binary patch
literal 930
zcmeAS@N?(olHy`uVBq!ia0vp^4j|0I3?%1nZ+ru!x&nMcT-^(N+`Ik{1{5}NM-k9f
zx+Ot=!3-}y{#<)Uok@}X^0T)Mjw~(h@l#Ir^NC7r=_#0-8E$a3RKVL~nc3p~*UxA#
z4bjg_XJBBO<>}%W5^;EK_{&+V40u?Vtzk_Oy;*YMVqw~ozwz&rPG6d~>D#mR`SK=;
zww9K@s-5|}%Dy=+ak|}>#qwwKGH>ZO4~|`P_r2LJy1RYqyXB`=?Mw?@F8Z!h{rcpz
z^y94Mdt1KFIr?nR|NE2g?N}2vO^d(4;=OB>WP0Plul!REN;cgwUAJuA?C`^98NGCJ
zuf=eS_<ywAnX-5Lr`lw*>OHmETd)0azdLJ6Z^FIm6*YNHw|4%l<hA_OWB(#f<d}&E
zzmQ_q+<Ue0d(SR>Gf`stp1;dK$1sNYdj7ec{*dYEN(RM7|LFZWoy#R9733Kz`kee`
zcsH&1+JCz2|7qRT%bgpNUdZ3E%i6T)I?vY6{p)ga_qlB<;GAPn(!{OF;x_wm_K%n(
zW67=BbK}Hx+Mo2yW_)0K?|;#s9f!Uw=S;9NQ)S^>UOs1+lefL)nQKa6oJzg9f7^uT
zr^QQJHL|;hJ!n29P`>r{pI$??E8ll+Vp%D3sqgGAQ?16Ir>}307i!n%dGB~BK<k4?
zqj4hNN`nolk0tjqrTm?;lA+7+)#}YpjB5=iGt70mC&tfS#K}^(jQP)uoOnjfq^mED
z%JpJ8<|=(q;xuiqk;&%1&cx(;rD;{mfsnJDH<QmQZ|kz-RduQC4rnUSV^Fl5;jpcO
z;h`=^vqp?tq7r9t<c^sww<7}rzTBPk?G^uv+C^1Czh1qaTpDAe@_IMlG_%I6>leRm
zV`}#;lUe7&`Rm%PqCLs%HOEe${KnWk%jlG>GM}cUf9>%Jt~^m(q1U%2$4$<)xHgTq
zd0EM;Wjbazr!IcCcJ{`1i$kvS+;+RTmT^vJdf^@OKlARE7bo`3-BEDmtJB75>uhqr
zB>Z2>{qec~lUw13i#jzoi~HY<zFg20e*b^L&wFKm|FipE)6ksjs9Fk4-VC0uelF{r
G5}E)C4#kuJ

literal 0
HcmV?d00001

diff --git a/packages/vue/test/base/src/components/ModalContent.vue b/packages/vue/test/base/src/components/ModalContent.vue
index 6b425e7cd7..7a01f45319 100644
--- a/packages/vue/test/base/src/components/ModalContent.vue
+++ b/packages/vue/test/base/src/components/ModalContent.vue
@@ -2,7 +2,7 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="end">
           <ion-button @click="dismiss" id="dismiss">Dismiss</ion-button>
         </ion-buttons>
         <ion-title>Modal</ion-title>
diff --git a/packages/vue/test/base/src/components/NavChild.vue b/packages/vue/test/base/src/components/NavChild.vue
index 6208bc7b39..8b0ce6ae96 100644
--- a/packages/vue/test/base/src/components/NavChild.vue
+++ b/packages/vue/test/base/src/components/NavChild.vue
@@ -1,7 +1,7 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-buttons>
+      <ion-buttons slot="start">
         <ion-back-button></ion-back-button>
       </ion-buttons>
       <ion-title>Nav - Child</ion-title>
diff --git a/packages/vue/test/base/src/components/NavRoot.vue b/packages/vue/test/base/src/components/NavRoot.vue
index ffd18e6765..b71fd81530 100644
--- a/packages/vue/test/base/src/components/NavRoot.vue
+++ b/packages/vue/test/base/src/components/NavRoot.vue
@@ -1,7 +1,7 @@
 <template>
   <ion-header>
     <ion-toolbar>
-      <ion-buttons>
+      <ion-buttons slot="end">
         <ion-button @click="dismiss">Dismiss</ion-button>
       </ion-buttons>
       <ion-title>Nav - Root</ion-title>
diff --git a/packages/vue/test/base/src/main.ts b/packages/vue/test/base/src/main.ts
index e2782fdd97..30c022a628 100644
--- a/packages/vue/test/base/src/main.ts
+++ b/packages/vue/test/base/src/main.ts
@@ -20,6 +20,17 @@ import '@ionic/vue/css/text-transformation.css';
 import '@ionic/vue/css/flex-utils.css';
 import '@ionic/vue/css/display.css';
 
+/**
+ * Ionic Dark Mode
+ * -----------------------------------------------------
+ * For more info, please see:
+ * https://ionicframework.com/docs/theming/dark-mode
+ */
+
+/* @import '@ionic/vue/css/palettes/dark.always.css'; */
+/* @import '@ionic/vue/css/palettes/dark.class.css'; */
+import '@ionic/vue/css/palettes/dark.system.css';
+
 /* Theme variables */
 import './theme/variables.css';
 
diff --git a/packages/vue/test/base/src/router/index.ts b/packages/vue/test/base/src/router/index.ts
index 13d4e919ad..ab5850e33c 100644
--- a/packages/vue/test/base/src/router/index.ts
+++ b/packages/vue/test/base/src/router/index.ts
@@ -70,10 +70,6 @@ const routes: Array<RouteRecordRaw> = [
     path: '/navigation',
     component: () => import('@/views/Navigation.vue')
   },
-  {
-    path: '/components',
-    component: () => import('@/views/Components.vue'),
-  },
   {
     path: '/components/breadcrumbs',
     component: () => import('@/views/Breadcrumbs.vue')
@@ -92,26 +88,26 @@ const routes: Array<RouteRecordRaw> = [
   },
   {
     path: '/nested',
-    component: () => import('@/views/RouterOutlet.vue'),
+    component: () => import('@/views/nested/RouterOutlet.vue'),
     children: [
       {
         path: '',
-        component: () => import('@/views/NestedChild.vue')
+        component: () => import('@/views/nested/NestedChild.vue')
       },
       {
         path: 'two',
-        component: () => import('@/views/NestedChildTwo.vue')
+        component: () => import('@/views/nested/NestedChildTwo.vue')
       },
       {
         path: ':id',
-        component: () => import('@/views/Folder.vue'),
+        component: () => import('@/views/nested/Folder.vue'),
         props: true
       }
     ]
   },
   {
     path: '/tabs/',
-    component: () => import('@/views/Tabs.vue'),
+    component: () => import('@/views/tabs/Tabs.vue'),
     children: [
       {
         path: '',
@@ -119,33 +115,33 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1.vue'),
+        component: () => import('@/views/tabs/Tab1.vue'),
       },
       {
         path: 'tab1/:id',
-        component: () => import('@/views/Tab1Parameter.vue'),
+        component: () => import('@/views/tabs/Tab1Parameter.vue'),
         props: true
       },
       {
         path: 'tab2',
-        component: () => import('@/views/Tab2.vue')
+        component: () => import('@/views/tabs/Tab2.vue')
       },
       {
         path: 'tab3',
         beforeEnter: (to, from, next) => {
           next({ path: '/tabs/tab1' });
         },
-        component: () => import('@/views/Tab3.vue')
+        component: () => import('@/views/tabs/Tab3.vue')
       },
       {
         path: 'tab4',
-        component: () => import('@/views/Tab4.vue')
+        component: () => import('@/views/tabs/Tab4.vue')
       }
     ]
   },
   {
     path: '/tabs-secondary/',
-    component: () => import('@/views/TabsSecondary.vue'),
+    component: () => import('@/views/tabs-secondary/TabsSecondary.vue'),
     children: [
       {
         path: '',
@@ -153,15 +149,15 @@ const routes: Array<RouteRecordRaw> = [
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1Secondary.vue')
+        component: () => import('@/views/tabs-secondary/Tab1Secondary.vue')
       },
       {
         path: 'tab2',
-        component: () => import('@/views/Tab2Secondary.vue')
+        component: () => import('@/views/tabs-secondary/Tab2Secondary.vue')
       },
       {
         path: 'tab3',
-        component: () => import('@/views/Tab3Secondary.vue')
+        component: () => import('@/views/tabs-secondary/Tab3Secondary.vue')
       }
     ]
   },
diff --git a/packages/vue/test/base/src/theme/variables.css b/packages/vue/test/base/src/theme/variables.css
index 8d6ebdc65c..248ba644ce 100644
--- a/packages/vue/test/base/src/theme/variables.css
+++ b/packages/vue/test/base/src/theme/variables.css
@@ -1,232 +1,10 @@
-/* Ionic Variables and Theming. For more info, please see:
+/* For information on how to create your own theme, please see:
 http://ionicframework.com/docs/theming/ */
 
-/** Ionic CSS Variables **/
-:root {
-  /** primary **/
-  --ion-color-primary: #3880ff;
-  --ion-color-primary-rgb: 56, 128, 255;
-  --ion-color-primary-contrast: #ffffff;
-  --ion-color-primary-contrast-rgb: 255, 255, 255;
-  --ion-color-primary-shade: #3171e0;
-  --ion-color-primary-tint: #4c8dff;
-
-  /** secondary **/
-  --ion-color-secondary: #3dc2ff;
-  --ion-color-secondary-rgb: 61, 194, 255;
-  --ion-color-secondary-contrast: #ffffff;
-  --ion-color-secondary-contrast-rgb: 255, 255, 255;
-  --ion-color-secondary-shade: #36abe0;
-  --ion-color-secondary-tint: #50c8ff;
-
-  /** tertiary **/
-  --ion-color-tertiary: #5260ff;
-  --ion-color-tertiary-rgb: 82, 96, 255;
-  --ion-color-tertiary-contrast: #ffffff;
-  --ion-color-tertiary-contrast-rgb: 255, 255, 255;
-  --ion-color-tertiary-shade: #4854e0;
-  --ion-color-tertiary-tint: #6370ff;
-
-  /** success **/
-  --ion-color-success: #2dd36f;
-  --ion-color-success-rgb: 45, 211, 111;
-  --ion-color-success-contrast: #ffffff;
-  --ion-color-success-contrast-rgb: 255, 255, 255;
-  --ion-color-success-shade: #28ba62;
-  --ion-color-success-tint: #42d77d;
-
-  /** warning **/
-  --ion-color-warning: #ffc409;
-  --ion-color-warning-rgb: 255, 196, 9;
-  --ion-color-warning-contrast: #000000;
-  --ion-color-warning-contrast-rgb: 0, 0, 0;
-  --ion-color-warning-shade: #e0ac08;
-  --ion-color-warning-tint: #ffca22;
-
-  /** danger **/
-  --ion-color-danger: #eb445a;
-  --ion-color-danger-rgb: 235, 68, 90;
-  --ion-color-danger-contrast: #ffffff;
-  --ion-color-danger-contrast-rgb: 255, 255, 255;
-  --ion-color-danger-shade: #cf3c4f;
-  --ion-color-danger-tint: #ed576b;
-
-  /** dark **/
-  --ion-color-dark: #222428;
-  --ion-color-dark-rgb: 34, 36, 40;
-  --ion-color-dark-contrast: #ffffff;
-  --ion-color-dark-contrast-rgb: 255, 255, 255;
-  --ion-color-dark-shade: #1e2023;
-  --ion-color-dark-tint: #383a3e;
-
-  /** medium **/
-  --ion-color-medium: #92949c;
-  --ion-color-medium-rgb: 146, 148, 156;
-  --ion-color-medium-contrast: #ffffff;
-  --ion-color-medium-contrast-rgb: 255, 255, 255;
-  --ion-color-medium-shade: #808289;
-  --ion-color-medium-tint: #9d9fa6;
-
-  /** light **/
-  --ion-color-light: #f4f5f8;
-  --ion-color-light-rgb: 244, 245, 248;
-  --ion-color-light-contrast: #000000;
-  --ion-color-light-contrast-rgb: 0, 0, 0;
-  --ion-color-light-shade: #d7d8da;
-  --ion-color-light-tint: #f5f6f9;
+.list-md {
+  background: transparent;
 }
 
-@media (prefers-color-scheme: dark) {
-  /*
-   * Dark Colors
-   * -------------------------------------------
-   */
-
-  body {
-    --ion-color-primary: #428cff;
-    --ion-color-primary-rgb: 66,140,255;
-    --ion-color-primary-contrast: #ffffff;
-    --ion-color-primary-contrast-rgb: 255,255,255;
-    --ion-color-primary-shade: #3a7be0;
-    --ion-color-primary-tint: #5598ff;
-
-    --ion-color-secondary: #50c8ff;
-    --ion-color-secondary-rgb: 80,200,255;
-    --ion-color-secondary-contrast: #ffffff;
-    --ion-color-secondary-contrast-rgb: 255,255,255;
-    --ion-color-secondary-shade: #46b0e0;
-    --ion-color-secondary-tint: #62ceff;
-
-    --ion-color-tertiary: #6a64ff;
-    --ion-color-tertiary-rgb: 106,100,255;
-    --ion-color-tertiary-contrast: #ffffff;
-    --ion-color-tertiary-contrast-rgb: 255,255,255;
-    --ion-color-tertiary-shade: #5d58e0;
-    --ion-color-tertiary-tint: #7974ff;
-
-    --ion-color-success: #2fdf75;
-    --ion-color-success-rgb: 47,223,117;
-    --ion-color-success-contrast: #000000;
-    --ion-color-success-contrast-rgb: 0,0,0;
-    --ion-color-success-shade: #29c467;
-    --ion-color-success-tint: #44e283;
-
-    --ion-color-warning: #ffd534;
-    --ion-color-warning-rgb: 255,213,52;
-    --ion-color-warning-contrast: #000000;
-    --ion-color-warning-contrast-rgb: 0,0,0;
-    --ion-color-warning-shade: #e0bb2e;
-    --ion-color-warning-tint: #ffd948;
-
-    --ion-color-danger: #ff4961;
-    --ion-color-danger-rgb: 255,73,97;
-    --ion-color-danger-contrast: #ffffff;
-    --ion-color-danger-contrast-rgb: 255,255,255;
-    --ion-color-danger-shade: #e04055;
-    --ion-color-danger-tint: #ff5b71;
-
-    --ion-color-dark: #f4f5f8;
-    --ion-color-dark-rgb: 244,245,248;
-    --ion-color-dark-contrast: #000000;
-    --ion-color-dark-contrast-rgb: 0,0,0;
-    --ion-color-dark-shade: #d7d8da;
-    --ion-color-dark-tint: #f5f6f9;
-
-    --ion-color-medium: #989aa2;
-    --ion-color-medium-rgb: 152,154,162;
-    --ion-color-medium-contrast: #000000;
-    --ion-color-medium-contrast-rgb: 0,0,0;
-    --ion-color-medium-shade: #86888f;
-    --ion-color-medium-tint: #a2a4ab;
-
-    --ion-color-light: #222428;
-    --ion-color-light-rgb: 34,36,40;
-    --ion-color-light-contrast: #ffffff;
-    --ion-color-light-contrast-rgb: 255,255,255;
-    --ion-color-light-shade: #1e2023;
-    --ion-color-light-tint: #383a3e;
-  }
-
-  /*
-   * iOS Dark Theme
-   * -------------------------------------------
-   */
-
-  .ios body {
-    --ion-background-color: #000000;
-    --ion-background-color-rgb: 0,0,0;
-
-    --ion-text-color: #ffffff;
-    --ion-text-color-rgb: 255,255,255;
-
-    --ion-color-step-50: #0d0d0d;
-    --ion-color-step-100: #1a1a1a;
-    --ion-color-step-150: #262626;
-    --ion-color-step-200: #333333;
-    --ion-color-step-250: #404040;
-    --ion-color-step-300: #4d4d4d;
-    --ion-color-step-350: #595959;
-    --ion-color-step-400: #666666;
-    --ion-color-step-450: #737373;
-    --ion-color-step-500: #808080;
-    --ion-color-step-550: #8c8c8c;
-    --ion-color-step-600: #999999;
-    --ion-color-step-650: #a6a6a6;
-    --ion-color-step-700: #b3b3b3;
-    --ion-color-step-750: #bfbfbf;
-    --ion-color-step-800: #cccccc;
-    --ion-color-step-850: #d9d9d9;
-    --ion-color-step-900: #e6e6e6;
-    --ion-color-step-950: #f2f2f2;
-
-    --ion-toolbar-background: #0d0d0d;
-
-    --ion-item-background: #000000;
-
-    --ion-card-background: #1c1c1d;
-  }
-
-
-  /*
-   * Material Design Dark Theme
-   * -------------------------------------------
-   */
-
-  .md body {
-    --ion-background-color: #121212;
-    --ion-background-color-rgb: 18,18,18;
-
-    --ion-text-color: #ffffff;
-    --ion-text-color-rgb: 255,255,255;
-
-    --ion-border-color: #222222;
-
-    --ion-color-step-50: #1e1e1e;
-    --ion-color-step-100: #2a2a2a;
-    --ion-color-step-150: #363636;
-    --ion-color-step-200: #414141;
-    --ion-color-step-250: #4d4d4d;
-    --ion-color-step-300: #595959;
-    --ion-color-step-350: #656565;
-    --ion-color-step-400: #717171;
-    --ion-color-step-450: #7d7d7d;
-    --ion-color-step-500: #898989;
-    --ion-color-step-550: #949494;
-    --ion-color-step-600: #a0a0a0;
-    --ion-color-step-650: #acacac;
-    --ion-color-step-700: #b8b8b8;
-    --ion-color-step-750: #c4c4c4;
-    --ion-color-step-800: #d0d0d0;
-    --ion-color-step-850: #dbdbdb;
-    --ion-color-step-900: #e7e7e7;
-    --ion-color-step-950: #f3f3f3;
-
-    --ion-item-background: #1e1e1e;
-
-    --ion-toolbar-background: #1f1f1f;
-
-    --ion-tab-bar-background: #1f1f1f;
-
-    --ion-card-background: #1e1e1e;
-  }
+.list-ios ion-item {
+  --ion-item-background: #1c1c1e;
 }
diff --git a/packages/vue/test/base/src/views/Breadcrumbs.vue b/packages/vue/test/base/src/views/Breadcrumbs.vue
index 7e823056c0..11919e90be 100644
--- a/packages/vue/test/base/src/views/Breadcrumbs.vue
+++ b/packages/vue/test/base/src/views/Breadcrumbs.vue
@@ -2,6 +2,9 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
         <ion-title>Breadcrumbs</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -29,25 +32,16 @@
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
-  IonPage,
+  IonBackButton,
+  IonBreadcrumb,
+  IonBreadcrumbs,
+  IonButtons,
+  IonContent,
   IonHeader,
   IonToolbar,
   IonTitle,
-  IonContent,
-  IonBreadcrumbs,
+  IonPage,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  components: {
-    IonPage,
-    IonHeader,
-    IonToolbar,
-    IonTitle,
-    IonContent,
-    IonBreadcrumbs,
-  },
-});
 </script>
diff --git a/packages/vue/test/base/src/views/Components.vue b/packages/vue/test/base/src/views/Components.vue
deleted file mode 100644
index 01b11821ad..0000000000
--- a/packages/vue/test/base/src/views/Components.vue
+++ /dev/null
@@ -1,26 +0,0 @@
-<template>
-  <ion-page>
-    <ion-content>
-      <ion-list>
-        <ion-item router-link="/components/breadcrumbs">
-          <ion-label>Breadcrumbs</ion-label>
-        </ion-item>
-        <ion-item router-link="/components/select">
-          <ion-label>Select</ion-label>
-        </ion-item>
-        <ion-item router-link="/components/range">
-          <ion-label>Range</ion-label>
-        </ion-item>
-      </ion-list>
-    </ion-content>
-  </ion-page>
-</template>
-
-<script lang="ts">
-import { defineComponent } from "vue";
-import { IonPage, IonContent, IonList, IonItem, IonLabel } from "@ionic/vue";
-
-export default defineComponent({
-  components: { IonPage, IonContent, IonList, IonItem, IonLabel },
-});
-</script>
diff --git a/packages/vue/test/base/src/views/DefaultHref.vue b/packages/vue/test/base/src/views/DefaultHref.vue
index 9fd8094c51..11446398be 100644
--- a/packages/vue/test/base/src/views/DefaultHref.vue
+++ b/packages/vue/test/base/src/views/DefaultHref.vue
@@ -2,7 +2,7 @@
   <ion-page data-pageid="defaulthref">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>DefaultHref</ion-title>
diff --git a/packages/vue/test/base/src/views/Home.vue b/packages/vue/test/base/src/views/Home.vue
index d4d88e61a3..a3ddbdf99c 100644
--- a/packages/vue/test/base/src/views/Home.vue
+++ b/packages/vue/test/base/src/views/Home.vue
@@ -17,21 +17,21 @@
       </ion-header>
 
       <ion-list>
+        <ion-list-header>
+          <ion-label>Overlays</ion-label>
+        </ion-list-header>
         <ion-item router-link="/overlays">
           <ion-label>Overlays</ion-label>
         </ion-item>
-        <ion-item router-link="/icons">
-          <ion-label>Icons</ion-label>
-        </ion-item>
-        <ion-item router-link="/inputs">
-          <ion-label>Inputs</ion-label>
-        </ion-item>
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>
+          <ion-label>Navigation</ion-label>
+        </ion-list-header>
         <ion-item router-link="/navigation" id="navigation">
           <ion-label>Navigation</ion-label>
         </ion-item>
-        <ion-item router-link="/reorder-group">
-          <ion-label>Reorder Group</ion-label>
-        </ion-item>
         <ion-item router-link="/routing" id="routing">
           <ion-label>Routing</ion-label>
         </ion-item>
@@ -59,15 +59,36 @@
         <ion-item router-link="/delayed-redirect" id="delayed-redirect">
           <ion-label>Delayed Redirect</ion-label>
         </ion-item>
-        <ion-item router-link="/components">
+      </ion-list>
+
+      <ion-list>
+        <ion-list-header>
           <ion-label>Components</ion-label>
+        </ion-list-header>
+        <ion-item router-link="/components/breadcrumbs">
+          <ion-label>Breadcrumbs</ion-label>
+        </ion-item>
+        <ion-item router-link="/icons">
+          <ion-label>Icons</ion-label>
+        </ion-item>
+        <ion-item router-link="/inputs">
+          <ion-label>Inputs</ion-label>
+        </ion-item>
+        <ion-item router-link="/components/range">
+          <ion-label>Range</ion-label>
+        </ion-item>
+        <ion-item router-link="/reorder-group">
+          <ion-label>Reorder Group</ion-label>
+        </ion-item>
+        <ion-item router-link="/components/select">
+          <ion-label>Select</ion-label>
         </ion-item>
       </ion-list>
     </ion-content>
   </ion-page>
 </template>
 
-<script lang="ts">
+<script setup lang="ts">
 import {
   IonButtons,
   IonBackButton,
@@ -76,24 +97,9 @@ import {
   IonItem,
   IonLabel,
   IonList,
+  IonListHeader,
   IonPage,
   IonTitle,
   IonToolbar,
 } from "@ionic/vue";
-import { defineComponent } from "vue";
-
-export default defineComponent({
-  components: {
-    IonButtons,
-    IonBackButton,
-    IonContent,
-    IonHeader,
-    IonItem,
-    IonLabel,
-    IonList,
-    IonPage,
-    IonTitle,
-    IonToolbar,
-  },
-});
 </script>
diff --git a/packages/vue/test/base/src/views/Icons.vue b/packages/vue/test/base/src/views/Icons.vue
index f44e3516b1..533909ec54 100644
--- a/packages/vue/test/base/src/views/Icons.vue
+++ b/packages/vue/test/base/src/views/Icons.vue
@@ -2,8 +2,8 @@
   <ion-page data-pageid="icons">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Icons</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/Inputs.vue b/packages/vue/test/base/src/views/Inputs.vue
index b4dc2f496b..28108f4f0d 100644
--- a/packages/vue/test/base/src/views/Inputs.vue
+++ b/packages/vue/test/base/src/views/Inputs.vue
@@ -2,8 +2,8 @@
   <ion-page data-pageid="inputs">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Inputs</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/Lifecycle.vue b/packages/vue/test/base/src/views/Lifecycle.vue
index c7779c72b3..57dbb13a8e 100644
--- a/packages/vue/test/base/src/views/Lifecycle.vue
+++ b/packages/vue/test/base/src/views/Lifecycle.vue
@@ -2,8 +2,8 @@
   <ion-page data-pageid="lifecycle">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Lifecycle</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/LifecycleSetup.vue b/packages/vue/test/base/src/views/LifecycleSetup.vue
index b31b162040..8d427ef217 100644
--- a/packages/vue/test/base/src/views/LifecycleSetup.vue
+++ b/packages/vue/test/base/src/views/LifecycleSetup.vue
@@ -2,8 +2,8 @@
   <ion-page data-pageid="lifecycle-setup">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Lifecycle (Setup)</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/Navigation.vue b/packages/vue/test/base/src/views/Navigation.vue
index 33bbb08a87..ae6102f46c 100644
--- a/packages/vue/test/base/src/views/Navigation.vue
+++ b/packages/vue/test/base/src/views/Navigation.vue
@@ -2,8 +2,8 @@
   <ion-page data-pageid="navigation">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Navigation</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/Overlays.vue b/packages/vue/test/base/src/views/Overlays.vue
index 799a44672b..49b956e0dd 100644
--- a/packages/vue/test/base/src/views/Overlays.vue
+++ b/packages/vue/test/base/src/views/Overlays.vue
@@ -2,68 +2,69 @@
   <ion-page data-pageid="overlays">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Overlays</ion-title>
       </ion-toolbar>
     </ion-header>
 
-    <ion-content class="ion-padding" :fullscreen="true">
-      <ion-radio-group v-model="componentType">
-        <ion-list-header>
-          <ion-label>
-            Component
-          </ion-label>
-        </ion-list-header>
+    <ion-content :fullscreen="true">
+      <ion-list>
+        <ion-radio-group v-model="componentType">
+          <ion-list-header>
+            <ion-label>
+              Component
+            </ion-label>
+          </ion-list-header>
 
-        <ion-item>
-          <ion-radio value="alert" id="ion-alert">Alert</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="action-sheet" id="ion-action-sheet">Action Sheet</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="loading" id="ion-loading">Loading</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="modal" id="ion-modal">Modal</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="popover" id="ion-popover">Popover</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="toast" id="ion-toast">Toast</ion-radio>
-        </ion-item>
-      </ion-radio-group>
+          <ion-item>
+            <ion-radio value="alert" id="ion-alert">Alert</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="action-sheet" id="ion-action-sheet">Action Sheet</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="loading" id="ion-loading">Loading</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="modal" id="ion-modal">Modal</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="popover" id="ion-popover">Popover</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="toast" id="ion-toast">Toast</ion-radio>
+          </ion-item>
+        </ion-radio-group>
 
-      <ion-radio-group v-model="presentationType">
-        <ion-list-header>
-          <ion-label>
-            Presentation Type
-          </ion-label>
-        </ion-list-header>
+        <ion-radio-group v-model="presentationType">
+          <ion-list-header>
+            <ion-label>
+              Presentation Type
+            </ion-label>
+          </ion-list-header>
 
-        <ion-item>
-          <ion-radio value="controller" id="controller">Controller</ion-radio>
-        </ion-item>
-        <ion-item>
-          <ion-radio value="component" id="component">Component</ion-radio>
-        </ion-item>
-      </ion-radio-group>
+          <ion-item>
+            <ion-radio value="controller" id="controller">Controller</ion-radio>
+          </ion-item>
+          <ion-item>
+            <ion-radio value="component" id="component">Component</ion-radio>
+          </ion-item>
+        </ion-radio-group>
+      </ion-list>
 
-      <br />
+      <div class="ion-display-flex ion-justify-content-center ion-flex-wrap ion-margin">
+        <ion-button @click="present($event)" id="present-overlay">Present Overlay</ion-button>
+        <ion-button @click="changeLoadingProps()" id="change-loading-props">Quickly Change Loading Props</ion-button>
+      </div>
 
-      <ion-button @click="present($event)" id="present-overlay">Present Overlay</ion-button>
-
-      <ion-button @click="changeLoadingProps()" id="change-loading-props">Quickly Change Loading Props</ion-button>
-
-      <br /><br />
-
-      Modal onWillPresent: <div id="willPresent">{{ willPresent }}</div><br />
-      Modal onDidPresent: <div id="didPresent">{{ didPresent }}</div><br />
-      Modal onWillDismiss: <div id="willDismiss">{{ willDismiss }}</div><br />
-      Modal onDidDismiss: <div id="didDismiss">{{ didDismiss }}</div><br />
+      <div class="ion-padding">
+        Modal onWillPresent: <div id="willPresent">{{ willPresent }}</div><br />
+        Modal onDidPresent: <div id="didPresent">{{ didPresent }}</div><br />
+        Modal onWillDismiss: <div id="willDismiss">{{ willDismiss }}</div><br />
+        Modal onDidDismiss: <div id="didDismiss">{{ didDismiss }}</div><br />
+      </div>
 
       <ion-action-sheet
         :is-open="isActionSheetOpen"
@@ -131,6 +132,7 @@ import {
   IonHeader,
   IonItem,
   IonLabel,
+  IonList,
   IonListHeader,
   IonPage,
   IonRadio,
@@ -166,6 +168,7 @@ export default defineComponent({
     IonHeader,
     IonItem,
     IonLabel,
+    IonList,
     IonListHeader,
     IonPage,
     IonRadio,
diff --git a/packages/vue/test/base/src/views/OverlaysKeepContentsMounted.vue b/packages/vue/test/base/src/views/OverlaysKeepContentsMounted.vue
index db4641d6f0..4bf0c9b8a4 100644
--- a/packages/vue/test/base/src/views/OverlaysKeepContentsMounted.vue
+++ b/packages/vue/test/base/src/views/OverlaysKeepContentsMounted.vue
@@ -2,7 +2,7 @@
   <ion-page data-pageid="overlays-automount">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Overlays - Auto Mount</ion-title>
diff --git a/packages/vue/test/base/src/views/Range.vue b/packages/vue/test/base/src/views/Range.vue
index c0d6106140..85463dcc21 100644
--- a/packages/vue/test/base/src/views/Range.vue
+++ b/packages/vue/test/base/src/views/Range.vue
@@ -2,6 +2,9 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
         <ion-title>Range</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -23,6 +26,8 @@
 <script lang="ts">
 import {
   IonPage,
+  IonBackButton,
+  IonButtons,
   IonHeader,
   IonToolbar,
   IonTitle,
@@ -36,6 +41,8 @@ import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     IonPage,
+    IonBackButton,
+    IonButtons,
     IonHeader,
     IonToolbar,
     IonTitle,
diff --git a/packages/vue/test/base/src/views/ReorderGroup.vue b/packages/vue/test/base/src/views/ReorderGroup.vue
index 48ccab650e..42f7d946a7 100644
--- a/packages/vue/test/base/src/views/ReorderGroup.vue
+++ b/packages/vue/test/base/src/views/ReorderGroup.vue
@@ -3,7 +3,7 @@
     <ion-header :translucent="true">
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-back-button></ion-back-button>
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Reorder Group</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/Routing.vue b/packages/vue/test/base/src/views/Routing.vue
index f7977dde78..78f50a5dea 100644
--- a/packages/vue/test/base/src/views/Routing.vue
+++ b/packages/vue/test/base/src/views/Routing.vue
@@ -2,8 +2,8 @@
   <ion-page data-pageid="routing">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Routing</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/RoutingChild.vue b/packages/vue/test/base/src/views/RoutingChild.vue
index 8e41b6b728..72107123a0 100644
--- a/packages/vue/test/base/src/views/RoutingChild.vue
+++ b/packages/vue/test/base/src/views/RoutingChild.vue
@@ -2,8 +2,8 @@
   <ion-page data-pageid="routingchild">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/routing"></ion-back-button>
         </ion-buttons>
         <ion-title>Routing Child</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/RoutingParameter.vue b/packages/vue/test/base/src/views/RoutingParameter.vue
index 36c74e2fcc..63f882128e 100644
--- a/packages/vue/test/base/src/views/RoutingParameter.vue
+++ b/packages/vue/test/base/src/views/RoutingParameter.vue
@@ -2,8 +2,8 @@
   <ion-page :data-pageid="'routingparameter-' + $props.id">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/routing"></ion-back-button>
         </ion-buttons>
         <ion-title>Routing Parameter</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/RoutingParameterView.vue b/packages/vue/test/base/src/views/RoutingParameterView.vue
index c4d347df70..52dd5cec0e 100644
--- a/packages/vue/test/base/src/views/RoutingParameterView.vue
+++ b/packages/vue/test/base/src/views/RoutingParameterView.vue
@@ -2,8 +2,8 @@
   <ion-page data-pageid="routingparameterview">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/routing"></ion-back-button>
         </ion-buttons>
         <ion-title>Routing Parameter View</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/Select.vue b/packages/vue/test/base/src/views/Select.vue
index bb4d9b31f3..777c410e3d 100644
--- a/packages/vue/test/base/src/views/Select.vue
+++ b/packages/vue/test/base/src/views/Select.vue
@@ -2,6 +2,9 @@
   <ion-page>
     <ion-header>
       <ion-toolbar>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
+        </ion-buttons>
         <ion-title>Select</ion-title>
       </ion-toolbar>
     </ion-header>
@@ -25,6 +28,8 @@
 <script lang="ts">
 import {
   IonPage,
+  IonBackButton,
+  IonButtons,
   IonHeader,
   IonToolbar,
   IonTitle,
@@ -38,6 +43,8 @@ import { defineComponent } from "vue";
 export default defineComponent({
   components: {
     IonPage,
+    IonBackButton,
+    IonButtons,
     IonHeader,
     IonToolbar,
     IonTitle,
diff --git a/packages/vue/test/base/src/views/Template.vue b/packages/vue/test/base/src/views/Template.vue
index 50913f7989..3924fbbdd8 100644
--- a/packages/vue/test/base/src/views/Template.vue
+++ b/packages/vue/test/base/src/views/Template.vue
@@ -2,7 +2,7 @@
   <ion-page>
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Template</ion-title>
diff --git a/packages/vue/test/base/src/views/VersionTest.vue b/packages/vue/test/base/src/views/VersionTest.vue
index f47cb9d18d..e03b6c3c78 100644
--- a/packages/vue/test/base/src/views/VersionTest.vue
+++ b/packages/vue/test/base/src/views/VersionTest.vue
@@ -2,8 +2,8 @@
   <ion-page data-pageid="version-test">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
-          <ion-back-button></ion-back-button>
+        <ion-buttons slot="start">
+          <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>VersionTest</ion-title>
       </ion-toolbar>
diff --git a/packages/vue/test/base/src/views/Folder.vue b/packages/vue/test/base/src/views/nested/Folder.vue
similarity index 100%
rename from packages/vue/test/base/src/views/Folder.vue
rename to packages/vue/test/base/src/views/nested/Folder.vue
diff --git a/packages/vue/test/base/src/views/NestedChild.vue b/packages/vue/test/base/src/views/nested/NestedChild.vue
similarity index 96%
rename from packages/vue/test/base/src/views/NestedChild.vue
rename to packages/vue/test/base/src/views/nested/NestedChild.vue
index 2ab3f9475f..f0219e8418 100644
--- a/packages/vue/test/base/src/views/NestedChild.vue
+++ b/packages/vue/test/base/src/views/nested/NestedChild.vue
@@ -2,7 +2,7 @@
   <ion-page data-pageid="nestedchild">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Nested Child</ion-title>
diff --git a/packages/vue/test/base/src/views/NestedChildTwo.vue b/packages/vue/test/base/src/views/nested/NestedChildTwo.vue
similarity index 96%
rename from packages/vue/test/base/src/views/NestedChildTwo.vue
rename to packages/vue/test/base/src/views/nested/NestedChildTwo.vue
index d2429da8c8..6f5cfac23c 100644
--- a/packages/vue/test/base/src/views/NestedChildTwo.vue
+++ b/packages/vue/test/base/src/views/nested/NestedChildTwo.vue
@@ -2,7 +2,7 @@
   <ion-page data-pageid="nestedchildtwo">
     <ion-header :translucent="true">
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Nested Child Two</ion-title>
diff --git a/packages/vue/test/base/src/views/RouterOutlet.vue b/packages/vue/test/base/src/views/nested/RouterOutlet.vue
similarity index 95%
rename from packages/vue/test/base/src/views/RouterOutlet.vue
rename to packages/vue/test/base/src/views/nested/RouterOutlet.vue
index 0f18de02dc..370902ce19 100644
--- a/packages/vue/test/base/src/views/RouterOutlet.vue
+++ b/packages/vue/test/base/src/views/nested/RouterOutlet.vue
@@ -3,7 +3,7 @@
     <ion-header>
       <ion-toolbar>
         <ion-buttons slot="start">
-          <ion-back-button id="routeroutlet-back-button" text="Back to main outlet"></ion-back-button>
+          <ion-back-button id="routeroutlet-back-button" text="Back to main outlet" default-href="/"></ion-back-button>
           <ion-button id="inbox" router-link="/nested/inbox" router-direction="root">Inbox</ion-button>
           <ion-button id="trash" router-link="/nested/trash" router-direction="root">Trash</ion-button>
           <ion-button id="outbox" router-link="/nested/outbox" router-direction="root">Outbox</ion-button>
diff --git a/packages/vue/test/base/src/views/Tab1Secondary.vue b/packages/vue/test/base/src/views/tabs-secondary/Tab1Secondary.vue
similarity index 96%
rename from packages/vue/test/base/src/views/Tab1Secondary.vue
rename to packages/vue/test/base/src/views/tabs-secondary/Tab1Secondary.vue
index e4c344af51..a24f5e0f88 100644
--- a/packages/vue/test/base/src/views/Tab1Secondary.vue
+++ b/packages/vue/test/base/src/views/tabs-secondary/Tab1Secondary.vue
@@ -2,7 +2,7 @@
   <ion-page data-pageid="tab1-secondary">
     <ion-header>
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Tab 1 - Secondary</ion-title>
diff --git a/packages/vue/test/base/src/views/Tab2Secondary.vue b/packages/vue/test/base/src/views/tabs-secondary/Tab2Secondary.vue
similarity index 100%
rename from packages/vue/test/base/src/views/Tab2Secondary.vue
rename to packages/vue/test/base/src/views/tabs-secondary/Tab2Secondary.vue
diff --git a/packages/vue/test/base/src/views/Tab3Secondary.vue b/packages/vue/test/base/src/views/tabs-secondary/Tab3Secondary.vue
similarity index 100%
rename from packages/vue/test/base/src/views/Tab3Secondary.vue
rename to packages/vue/test/base/src/views/tabs-secondary/Tab3Secondary.vue
diff --git a/packages/vue/test/base/src/views/TabsSecondary.vue b/packages/vue/test/base/src/views/tabs-secondary/TabsSecondary.vue
similarity index 100%
rename from packages/vue/test/base/src/views/TabsSecondary.vue
rename to packages/vue/test/base/src/views/tabs-secondary/TabsSecondary.vue
diff --git a/packages/vue/test/base/src/views/Tab1.vue b/packages/vue/test/base/src/views/tabs/Tab1.vue
similarity index 97%
rename from packages/vue/test/base/src/views/Tab1.vue
rename to packages/vue/test/base/src/views/tabs/Tab1.vue
index 40e15a4ad4..72ecb2f209 100644
--- a/packages/vue/test/base/src/views/Tab1.vue
+++ b/packages/vue/test/base/src/views/tabs/Tab1.vue
@@ -2,7 +2,7 @@
   <ion-page data-pageid="tab1">
     <ion-header>
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Tab 1</ion-title>
diff --git a/packages/vue/test/base/src/views/Tab1Parameter.vue b/packages/vue/test/base/src/views/tabs/Tab1Parameter.vue
similarity index 96%
rename from packages/vue/test/base/src/views/Tab1Parameter.vue
rename to packages/vue/test/base/src/views/tabs/Tab1Parameter.vue
index 701f73b512..2d6075b639 100644
--- a/packages/vue/test/base/src/views/Tab1Parameter.vue
+++ b/packages/vue/test/base/src/views/tabs/Tab1Parameter.vue
@@ -2,7 +2,7 @@
   <ion-page :data-pageid="'tab1' + $props.id">
     <ion-header>
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button></ion-back-button>
         </ion-buttons>
         <ion-title>Tab 1 Child {{ $props.id }}</ion-title>
diff --git a/packages/vue/test/base/src/views/Tab2.vue b/packages/vue/test/base/src/views/tabs/Tab2.vue
similarity index 96%
rename from packages/vue/test/base/src/views/Tab2.vue
rename to packages/vue/test/base/src/views/tabs/Tab2.vue
index 25bfbcac4d..35976fa5e7 100644
--- a/packages/vue/test/base/src/views/Tab2.vue
+++ b/packages/vue/test/base/src/views/tabs/Tab2.vue
@@ -2,7 +2,7 @@
   <ion-page data-pageid="tab2">
     <ion-header>
       <ion-toolbar>
-        <ion-buttons>
+        <ion-buttons slot="start">
           <ion-back-button default-href="/"></ion-back-button>
         </ion-buttons>
         <ion-title>Tab 2</ion-title>
diff --git a/packages/vue/test/base/src/views/Tab3.vue b/packages/vue/test/base/src/views/tabs/Tab3.vue
similarity index 100%
rename from packages/vue/test/base/src/views/Tab3.vue
rename to packages/vue/test/base/src/views/tabs/Tab3.vue
diff --git a/packages/vue/test/base/src/views/Tab4.vue b/packages/vue/test/base/src/views/tabs/Tab4.vue
similarity index 100%
rename from packages/vue/test/base/src/views/Tab4.vue
rename to packages/vue/test/base/src/views/tabs/Tab4.vue
diff --git a/packages/vue/test/base/src/views/Tabs.vue b/packages/vue/test/base/src/views/tabs/Tabs.vue
similarity index 98%
rename from packages/vue/test/base/src/views/Tabs.vue
rename to packages/vue/test/base/src/views/tabs/Tabs.vue
index 03c9c93c74..359cb61963 100644
--- a/packages/vue/test/base/src/views/Tabs.vue
+++ b/packages/vue/test/base/src/views/tabs/Tabs.vue
@@ -37,7 +37,7 @@ export default defineComponent({
     ])
     const router = useRouter();
     const addTab = () => {
-      router.addRoute({ path: '/tabs/tab4', component: () => import('@/views/Tab4.vue') });
+      router.addRoute({ path: '/tabs/tab4', component: () => import('@/views/tabs/Tab4.vue') });
       tabs.value = [
         ...tabs.value,
         {
diff --git a/packages/vue/test/base/tests/e2e/specs/routing.cy.js b/packages/vue/test/base/tests/e2e/specs/routing.cy.js
index 289df4c55a..90f9cbac98 100644
--- a/packages/vue/test/base/tests/e2e/specs/routing.cy.js
+++ b/packages/vue/test/base/tests/e2e/specs/routing.cy.js
@@ -2,7 +2,7 @@ describe('Routing', () => {
   it('should go to sibling page', () => {
     cy.visit('/');
     cy.ionPageVisible('home');
-    cy.get('ion-item#routing').click();
+    cy.get('ion-item#routing').click({ force: true });
 
     cy.ionPageVisible('routing');
     cy.ionPageHidden('home');
@@ -18,7 +18,7 @@ describe('Routing', () => {
   it('should go back home', () => {
     cy.visit('/');
     cy.ionPageVisible('home');
-    cy.get('ion-item#routing').click();
+    cy.get('ion-item#routing').click({ force: true });
 
     cy.ionBackClick('routing');
 
@@ -40,7 +40,7 @@ describe('Routing', () => {
     cy.visit('/');
     cy.ionPageVisible('home');
 
-    cy.get('#routing').click();
+    cy.get('#routing').click({ force: true });
     cy.get('#child').click();
 
     cy.ionBackClick('routingchild');
@@ -539,7 +539,7 @@ describe('Routing - Swipe to Go Back', () => {
     cy.viewport(320, 568);
     cy.visit('?ionic:mode=ios');
     cy.ionPageVisible('home');
-    cy.get('#routing').click();
+    cy.get('#routing').click({ force: true });
     cy.ionPageHidden('home');
     cy.ionPageVisible('routing')
   });
diff --git a/packages/vue/test/base/tests/e2e/specs/tabs.cy.js b/packages/vue/test/base/tests/e2e/specs/tabs.cy.js
index b2c2ee6666..2b6cb15790 100644
--- a/packages/vue/test/base/tests/e2e/specs/tabs.cy.js
+++ b/packages/vue/test/base/tests/e2e/specs/tabs.cy.js
@@ -125,14 +125,14 @@ describe('Tabs', () => {
       cy.visit('/')
       cy.ionPageVisible('home');
 
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageVisible('tab1');
       cy.ionPageHidden('home');
 
       cy.ionBackClick('tab1');
       cy.ionPageDoesNotExist('tabs');
 
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageVisible('tab1');
       cy.ionPageHidden('home');
 
@@ -144,7 +144,7 @@ describe('Tabs', () => {
       cy.visit('/');
       cy.ionPageVisible('home');
 
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageVisible('tab1');
 
       cy.get('ion-tab-button#tab-button-tab2').click();
@@ -159,7 +159,7 @@ describe('Tabs', () => {
       cy.visit('/');
       cy.ionPageVisible('home');
 
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageVisible('tab1');
 
       cy.get('ion-tab-button#tab-button-tab2').click();
@@ -169,7 +169,7 @@ describe('Tabs', () => {
       cy.ionPageVisible('home')
       cy.ionPageDoesNotExist('tabs');
 
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageVisible('tab1');
 
       cy.get('ion-tab-button#tab-button-tab2').click();
@@ -639,7 +639,7 @@ describe('Tabs', () => {
       cy.viewport(320, 568);
       cy.visit('?ionic:mode=ios');
       cy.ionPageVisible('home');
-      cy.get('#tabs').click();
+      cy.get('#tabs').click({ force: true });
       cy.ionPageHidden('home');
       cy.ionPageVisible('tab1')
     });
diff --git a/packages/vue/test/base/vite.config.js b/packages/vue/test/base/vite.config.js
index 28059a967d..5c3d73c2b2 100644
--- a/packages/vue/test/base/vite.config.js
+++ b/packages/vue/test/base/vite.config.js
@@ -20,5 +20,8 @@ export default defineConfig({
   // Preview applies to "vite preview" command
   preview: {
     port: 8080
+  },
+  define: {
+    __VUE_PROD_HYDRATION_MISMATCH_DETAILS__: 'false'
   }
 })