diff --git a/vue-vite/base/.editorconfig b/vue-vite/base/.editorconfig
new file mode 100644
index 000000000..59d9a3a3e
--- /dev/null
+++ b/vue-vite/base/.editorconfig
@@ -0,0 +1,16 @@
+# Editor configuration, see https://editorconfig.org
+root = true
+
+[*]
+charset = utf-8
+indent_style = space
+indent_size = 2
+insert_final_newline = true
+trim_trailing_whitespace = true
+
+[*.ts]
+quote_type = single
+
+[*.md]
+max_line_length = off
+trim_trailing_whitespace = false
diff --git a/vue-vite/base/.eslintignore b/vue-vite/base/.eslintignore
deleted file mode 100644
index 7462f77ad..000000000
--- a/vue-vite/base/.eslintignore
+++ /dev/null
@@ -1,27 +0,0 @@
-.DS_Store
-node_modules
-/coverage
-/dist
-/ios
-/android
-
-
-# local env files
-.env.local
-.env.*.local
-
-# Log files
-npm-debug.log*
-yarn-debug.log*
-yarn-error.log*
-pnpm-debug.log*
-
-# Editor directories and files
-.idea
-.vscode
-*.suo
-*.ntvs*
-*.njsproj
-*.sln
-*.sw?
-
diff --git a/vue-vite/base/.eslintrc.cjs b/vue-vite/base/.eslintrc.cjs
deleted file mode 100644
index 8f715012c..000000000
--- a/vue-vite/base/.eslintrc.cjs
+++ /dev/null
@@ -1,20 +0,0 @@
-module.exports = {
-  root: true,
-  env: {
-    node: true
-  },
-  'extends': [
-    'plugin:vue/vue3-essential',
-    'eslint:recommended',
-    '@vue/typescript/recommended'
-  ],
-  parserOptions: {
-    ecmaVersion: 2020
-  },
-  rules: {
-    'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
-    'vue/no-deprecated-slot-attribute': 'off',
-    '@typescript-eslint/no-explicit-any': 'off',
-  }
-}
diff --git a/vue-vite/base/.gitignore b/vue-vite/base/.gitignore
index 2fc2afd6b..ae5b0207e 100644
--- a/vue-vite/base/.gitignore
+++ b/vue-vite/base/.gitignore
@@ -30,3 +30,9 @@ npm-debug.log*
 /platforms
 /plugins
 /www
+
+# Playwright
+/test-results/
+/playwright-report/
+/blob-report/
+/playwright/.cache/
diff --git a/vue-vite/base/.prettierignore b/vue-vite/base/.prettierignore
new file mode 100644
index 000000000..08d41d635
--- /dev/null
+++ b/vue-vite/base/.prettierignore
@@ -0,0 +1,5 @@
+# Prettier only reads the root .gitignore, not the ones inside the native
+# projects, so ignore them here to skip Capacitor's copied web build and
+# Gradle's build output.
+android/
+ios/
diff --git a/vue-vite/base/.vscode/extensions.json b/vue-vite/base/.vscode/extensions.json
index af3c0b294..5db56601c 100644
--- a/vue-vite/base/.vscode/extensions.json
+++ b/vue-vite/base/.vscode/extensions.json
@@ -1,5 +1,8 @@
 {
-    "recommendations": [
-        "Webnative.webnative"
-    ]
+  "recommendations": [
+    "dbaeumer.vscode-eslint",
+    "esbenp.prettier-vscode",
+    "Vue.volar",
+    "Webnative.webnative"
+  ]
 }
diff --git a/vue-vite/base/cypress.config.ts b/vue-vite/base/cypress.config.ts
deleted file mode 100644
index 809c0b434..000000000
--- a/vue-vite/base/cypress.config.ts
+++ /dev/null
@@ -1,15 +0,0 @@
-import { defineConfig } from 'cypress';
-
-export default defineConfig({
-  e2e: {
-    supportFile: 'tests/e2e/support/e2e.{js,jsx,ts,tsx}',
-    specPattern: 'tests/e2e/specs/**/*.cy.{js,jsx,ts,tsx}',
-    videosFolder: 'tests/e2e/videos',
-    screenshotsFolder: 'tests/e2e/screenshots',
-    baseUrl: 'http://localhost:5173',
-    // eslint-disable-next-line @typescript-eslint/no-unused-vars
-    setupNodeEvents(on, config) {
-      // implement node event listeners here
-    },
-  },
-});
diff --git a/vue-vite/base/eslint.config.js b/vue-vite/base/eslint.config.js
new file mode 100644
index 000000000..2b938358c
--- /dev/null
+++ b/vue-vite/base/eslint.config.js
@@ -0,0 +1,41 @@
+import js from '@eslint/js';
+import ionic from '@ionic/eslint-config/recommended.js';
+import { defineConfigWithVueTs, vueTsConfigs } from '@vue/eslint-config-typescript';
+import pluginVue from 'eslint-plugin-vue';
+import globals from 'globals';
+
+export default [
+  ...defineConfigWithVueTs(
+    {
+      ignores: ['dist/**', 'android/**', 'ios/**', 'playwright-report/**', 'test-results/**', 'blob-report/**'],
+    },
+    js.configs.recommended,
+    pluginVue.configs['flat/essential'],
+    vueTsConfigs.recommended,
+  ),
+  // Kept outside defineConfigWithVueTs: it treats `consistent-type-imports` as
+  // type-aware and would turn on project-based parsing for every .ts file.
+  // Note: @ionic/eslint-config only targets .ts/.tsx files, so <script> blocks in
+  // .vue files get the Vue and TypeScript rules above but not the Ionic ones.
+  ...ionic,
+  {
+    languageOptions: {
+      globals: {
+        ...globals.node,
+        ...globals.browser,
+      },
+    },
+    rules: {
+      'no-console': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'no-debugger': process.env.NODE_ENV === 'production' ? 'warn' : 'off',
+      'vue/no-deprecated-slot-attribute': 'off',
+      '@typescript-eslint/no-explicit-any': 'off',
+    },
+  },
+  {
+    files: ['tests/unit/**/*.spec.{js,ts}'],
+    languageOptions: {
+      globals: globals.vitest,
+    },
+  },
+];
diff --git a/vue-vite/base/package.json b/vue-vite/base/package.json
index 0667304de..6be91b168 100644
--- a/vue-vite/base/package.json
+++ b/vue-vite/base/package.json
@@ -7,9 +7,14 @@
     "dev": "vite",
     "build": "vue-tsc && vite build",
     "preview": "vite preview",
-    "test:e2e": "cypress run",
-    "test:unit": "vitest",
-    "lint": "eslint ."
+    "lint": "npm run eslint && npm run prettier -- --check",
+    "lint:fix": "npm run eslint -- --fix && npm run prettier -- --write",
+    "eslint": "eslint --max-warnings 0",
+    "prettier": "prettier \"**/*.{ts,vue}\"",
+    "test": "npm run test:unit && npm run test:e2e",
+    "test:unit": "vitest run",
+    "test:unit:watch": "vitest",
+    "test:e2e": "playwright test"
   },
   "dependencies": {
     "@ionic/vue": "^9.0.0",
@@ -19,18 +24,24 @@
     "vue-router": "^5.0.0"
   },
   "devDependencies": {
+    "@eslint/js": "^10.0.1",
+    "@ionic/eslint-config": "^0.5.0",
+    "@ionic/prettier-config": "^4.0.0",
+    "@playwright/test": "^1.64.1",
     "@vitejs/plugin-legacy": "^8.0.0",
     "@vitejs/plugin-vue": "^6.0.0",
-    "@vue/eslint-config-typescript": "^12.0.0",
+    "@vue/eslint-config-typescript": "^14.9.0",
     "@vue/test-utils": "^2.3.0",
-    "cypress": "^13.5.0",
-    "eslint": "^8.35.0",
-    "eslint-plugin-vue": "^9.9.0",
-    "jsdom": "^22.1.0",
+    "eslint": "^10.13.0",
+    "eslint-plugin-vue": "^10.11.1",
+    "globals": "^17.13.0",
+    "jsdom": "^30.1.3",
+    "prettier": "^3.9.10",
     "terser": "^5.16.0",
     "typescript": "~5.9.0",
     "vite": "^8.0.0",
-    "vitest": "~4.0.18",
-    "vue-tsc": "^2.1.10"
-  }
+    "vitest": "~5.0.5",
+    "vue-tsc": "^3.3.5"
+  },
+  "prettier": "@ionic/prettier-config"
 }
diff --git a/vue-vite/base/playwright.config.ts b/vue-vite/base/playwright.config.ts
new file mode 100644
index 000000000..4ea60917a
--- /dev/null
+++ b/vue-vite/base/playwright.config.ts
@@ -0,0 +1,27 @@
+import { defineConfig, devices } from '@playwright/test';
+
+const baseURL = 'http://localhost:5173';
+
+export default defineConfig({
+  testDir: './tests/e2e',
+  fullyParallel: true,
+  forbidOnly: !!process.env.CI,
+  retries: process.env.CI ? 2 : 0,
+  reporter: process.env.CI ? [['github'], ['html', { open: 'never' }]] : 'list',
+  use: {
+    baseURL,
+    trace: 'on-first-retry',
+  },
+  projects: [
+    {
+      name: 'Mobile Chrome',
+      use: { ...devices['Pixel 7'] },
+    },
+  ],
+  webServer: {
+    command: 'npm run dev -- --port 5173 --strictPort',
+    url: baseURL,
+    reuseExistingServer: !process.env.CI,
+    timeout: 120_000,
+  },
+});
diff --git a/vue-vite/base/src/main.ts b/vue-vite/base/src/main.ts
index 923c91c6f..7ade20873 100644
--- a/vue-vite/base/src/main.ts
+++ b/vue-vite/base/src/main.ts
@@ -1,8 +1,8 @@
-import { createApp } from 'vue'
-import App from './App.vue'
-import router from './router';
-
 import { IonicVue } from '@ionic/vue';
+import { createApp } from 'vue';
+
+import App from './App.vue';
+import router from './router';
 
 /* Core CSS required for Ionic components to work properly */
 import '@ionic/vue/css/core.css';
@@ -34,9 +34,7 @@ import '@ionic/vue/css/palettes/dark.system.css';
 /* Theme variables */
 import './theme/variables.css';
 
-const app = createApp(App)
-  .use(IonicVue)
-  .use(router);
+const app = createApp(App).use(IonicVue).use(router);
 
 router.isReady().then(() => {
   app.mount('#app');
diff --git a/vue-vite/base/tests/e2e/fixtures/example.json b/vue-vite/base/tests/e2e/fixtures/example.json
deleted file mode 100644
index 02e425437..000000000
--- a/vue-vite/base/tests/e2e/fixtures/example.json
+++ /dev/null
@@ -1,5 +0,0 @@
-{
-  "name": "Using fixtures to represent data",
-  "email": "hello@cypress.io",
-  "body": "Fixtures are a great way to mock data for responses to routes"
-}
diff --git a/vue-vite/base/tests/e2e/support/commands.ts b/vue-vite/base/tests/e2e/support/commands.ts
deleted file mode 100644
index 698b01a42..000000000
--- a/vue-vite/base/tests/e2e/support/commands.ts
+++ /dev/null
@@ -1,37 +0,0 @@
-/// <reference types="cypress" />
-// ***********************************************
-// This example commands.ts shows you how to
-// create various custom commands and overwrite
-// existing commands.
-//
-// For more comprehensive examples of custom
-// commands please read more here:
-// https://on.cypress.io/custom-commands
-// ***********************************************
-//
-//
-// -- This is a parent command --
-// Cypress.Commands.add('login', (email, password) => { ... })
-//
-//
-// -- This is a child command --
-// Cypress.Commands.add('drag', { prevSubject: 'element'}, (subject, options) => { ... })
-//
-//
-// -- This is a dual command --
-// Cypress.Commands.add('dismiss', { prevSubject: 'optional'}, (subject, options) => { ... })
-//
-//
-// -- This will overwrite an existing command --
-// Cypress.Commands.overwrite('visit', (originalFn, url, options) => { ... })
-//
-// declare global {
-//   namespace Cypress {
-//     interface Chainable {
-//       login(email: string, password: string): Chainable<void>
-//       drag(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       dismiss(subject: string, options?: Partial<TypeOptions>): Chainable<Element>
-//       visit(originalFn: CommandOriginalFn, url: string, options: Partial<VisitOptions>): Chainable<Element>
-//     }
-//   }
-// }
\ No newline at end of file
diff --git a/vue-vite/base/tests/e2e/support/e2e.ts b/vue-vite/base/tests/e2e/support/e2e.ts
deleted file mode 100644
index f80f74f8e..000000000
--- a/vue-vite/base/tests/e2e/support/e2e.ts
+++ /dev/null
@@ -1,20 +0,0 @@
-// ***********************************************************
-// This example support/e2e.ts is processed and
-// loaded automatically before your test files.
-//
-// This is a great place to put global configuration and
-// behavior that modifies Cypress.
-//
-// You can change the location of this file or turn off
-// automatically serving support files with the
-// 'supportFile' configuration option.
-//
-// You can read more here:
-// https://on.cypress.io/configuration
-// ***********************************************************
-
-// Import commands.js using ES2015 syntax:
-import './commands'
-
-// Alternatively you can use CommonJS syntax:
-// require('./commands')
\ No newline at end of file
diff --git a/vue-vite/base/vite.config.ts b/vue-vite/base/vite.config.ts
index 07c35d0d2..d57056347 100644
--- a/vue-vite/base/vite.config.ts
+++ b/vue-vite/base/vite.config.ts
@@ -1,16 +1,11 @@
-/// <reference types="vitest" />
-
-import legacy from '@vitejs/plugin-legacy'
-import vue from '@vitejs/plugin-vue'
-import path from 'path'
-import { defineConfig } from 'vite'
+import legacy from '@vitejs/plugin-legacy';
+import vue from '@vitejs/plugin-vue';
+import path from 'path';
+import { defineConfig } from 'vitest/config';
 
 // https://vitejs.dev/config/
 export default defineConfig({
-  plugins: [
-    vue(),
-    legacy()
-  ],
+  plugins: [vue(), legacy()],
   resolve: {
     alias: {
       '@': path.resolve(__dirname, './src'),
@@ -18,6 +13,8 @@ export default defineConfig({
   },
   test: {
     globals: true,
-    environment: 'jsdom'
-  }
-})
+    environment: 'jsdom',
+    // Playwright e2e specs live in tests/e2e.
+    include: ['tests/unit/**/*.spec.{js,ts}'],
+  },
+});
diff --git a/vue-vite/official/blank/ionic.starter.json b/vue-vite/official/blank/ionic.starter.json
index d0f5f51d2..680603d01 100644
--- a/vue-vite/official/blank/ionic.starter.json
+++ b/vue-vite/official/blank/ionic.starter.json
@@ -7,6 +7,6 @@
     "www"
   ],
   "scripts": {
-    "test": "npm run build && npm run test:unit -- --watch=false && npm i --no-save concurrently && ./node_modules/.bin/concurrently \"npm run dev\" \"npm run test:e2e\" --kill-others --success first"
+    "test": "npm run lint && npm run build && npm run test:unit && npx playwright install --with-deps chromium && npm run test:e2e"
   }
 }
diff --git a/vue-vite/official/blank/src/router/index.ts b/vue-vite/official/blank/src/router/index.ts
index b2fff99db..6a1308cdd 100644
--- a/vue-vite/official/blank/src/router/index.ts
+++ b/vue-vite/official/blank/src/router/index.ts
@@ -1,22 +1,23 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import HomePage from '../views/HomePage.vue'
+import type { RouteRecordRaw } from 'vue-router';
 
-const routes: Array<RouteRecordRaw> = [
+import HomePage from '../views/HomePage.vue';
+
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    redirect: '/home'
+    redirect: '/home',
   },
   {
     path: '/home',
     name: 'Home',
-    component: HomePage
-  }
-]
+    component: HomePage,
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;
diff --git a/vue-vite/official/blank/src/views/HomePage.vue b/vue-vite/official/blank/src/views/HomePage.vue
index 13920942b..7f6d11495 100644
--- a/vue-vite/official/blank/src/views/HomePage.vue
+++ b/vue-vite/official/blank/src/views/HomePage.vue
@@ -15,7 +15,12 @@
 
       <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>
+        <p>
+          Start with Ionic
+          <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components"
+            >UI Components</a
+          >
+        </p>
       </div>
     </ion-content>
   </ion-page>
@@ -28,7 +33,7 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 <style scoped>
 #container {
   text-align: center;
-  
+
   position: absolute;
   left: 0;
   right: 0;
@@ -44,9 +49,9 @@ import { IonContent, IonHeader, IonPage, IonTitle, IonToolbar } from '@ionic/vue
 #container p {
   font-size: 16px;
   line-height: 22px;
-  
+
   color: #8c8c8c;
-  
+
   margin: 0;
 }
 
diff --git a/vue-vite/official/blank/tests/e2e/app.spec.ts b/vue-vite/official/blank/tests/e2e/app.spec.ts
new file mode 100644
index 000000000..9a3645c1f
--- /dev/null
+++ b/vue-vite/official/blank/tests/e2e/app.spec.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('#container')).toContainText('Ready to create an app?');
+});
diff --git a/vue-vite/official/blank/tests/e2e/specs/test.cy.ts b/vue-vite/official/blank/tests/e2e/specs/test.cy.ts
deleted file mode 100644
index face194de..000000000
--- a/vue-vite/official/blank/tests/e2e/specs/test.cy.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('#container', 'Ready to create an app?')
-  })
-})
diff --git a/vue-vite/official/blank/tests/unit/example.spec.ts b/vue-vite/official/blank/tests/unit/example.spec.ts
index dcbf7fa1e..c551f04e2 100644
--- a/vue-vite/official/blank/tests/unit/example.spec.ts
+++ b/vue-vite/official/blank/tests/unit/example.spec.ts
@@ -1,10 +1,11 @@
-import { mount } from '@vue/test-utils'
-import HomePage from '@/views/HomePage.vue'
-import { describe, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+
+import HomePage from '@/views/HomePage.vue';
 
 describe('HomePage.vue', () => {
   test('renders home vue', () => {
-    const wrapper = mount(HomePage)
-    expect(wrapper.text()).toMatch('Ready to create an app?')
-  })
-})
+    const wrapper = mount(HomePage);
+    expect(wrapper.text()).toMatch('Ready to create an app?');
+  });
+});
diff --git a/vue-vite/official/list/ionic.starter.json b/vue-vite/official/list/ionic.starter.json
index 7f053573f..1d6c95d38 100644
--- a/vue-vite/official/list/ionic.starter.json
+++ b/vue-vite/official/list/ionic.starter.json
@@ -7,6 +7,6 @@
     "www"
   ],
   "scripts": {
-    "test": "npm run build && npm run test:unit -- --watch=false && npm i --no-save concurrently && ./node_modules/.bin/concurrently \"npm run dev\" \"npm run test:e2e\" --kill-others --success first"
+    "test": "npm run lint && npm run build && npm run test:unit && npx playwright install --with-deps chromium && npm run test:e2e"
   }
 }
diff --git a/vue-vite/official/list/src/components/MessageListItem.vue b/vue-vite/official/list/src/components/MessageListItem.vue
index 066bf9a42..e75619053 100644
--- a/vue-vite/official/list/src/components/MessageListItem.vue
+++ b/vue-vite/official/list/src/components/MessageListItem.vue
@@ -11,7 +11,11 @@
       </h2>
       <h3>{{ message.subject }}</h3>
       <p>
-        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+        Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+        magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+        consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+        pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est
+        laborum.
       </p>
     </ion-label>
   </ion-item>
@@ -45,7 +49,7 @@ const isIos = () => {
 .list-item h2 {
   font-weight: 600;
   margin: 0;
-  
+
   /**
    * With larger font scales
    * the date/time should wrap to the next
diff --git a/vue-vite/official/list/src/data/messages.ts b/vue-vite/official/list/src/data/messages.ts
index 74551428d..2c4fa777d 100644
--- a/vue-vite/official/list/src/data/messages.ts
+++ b/vue-vite/official/list/src/data/messages.ts
@@ -10,53 +10,52 @@ const messages: Message[] = [
     fromName: 'Matt Chorsey',
     subject: 'New event: Trip to Vegas',
     date: '9:32 AM',
-    id: 0
+    id: 0,
   },
   {
     fromName: 'Lauren Ruthford',
     subject: 'Long time no chat',
     date: '6:12 AM',
-    id: 1
+    id: 1,
   },
   {
     fromName: 'Jordan Firth',
     subject: 'Report Results',
     date: '4:55 AM',
-    id: 2
-
+    id: 2,
   },
   {
     fromName: 'Bill Thomas',
     subject: 'The situation',
     date: 'Yesterday',
-    id: 3
+    id: 3,
   },
   {
     fromName: 'Joanne Pollan',
     subject: 'Updated invitation: Swim lessons',
     date: 'Yesterday',
-    id: 4
+    id: 4,
   },
   {
     fromName: 'Andrea Cornerston',
     subject: 'Last minute ask',
     date: 'Yesterday',
-    id: 5
+    id: 5,
   },
   {
     fromName: 'Moe Chamont',
     subject: 'Family Calendar - Version 1',
     date: 'Last Week',
-    id: 6
+    id: 6,
   },
   {
     fromName: 'Kelly Richardson',
     subject: 'Placeholder Headhots',
     date: 'Last Week',
-    id: 7
-  }
+    id: 7,
+  },
 ];
 
-export const getMessages = () => messages;
+export const getMessages = (): Message[] => messages;
 
-export const getMessage = (id: number) => messages.find(m => m.id === id);
\ No newline at end of file
+export const getMessage = (id: number): Message | undefined => messages.find((m) => m.id === id);
diff --git a/vue-vite/official/list/src/router/index.ts b/vue-vite/official/list/src/router/index.ts
index e60e5df0b..eb3747673 100644
--- a/vue-vite/official/list/src/router/index.ts
+++ b/vue-vite/official/list/src/router/index.ts
@@ -1,26 +1,27 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import HomePage from '../views/HomePage.vue'
+import type { RouteRecordRaw } from 'vue-router';
 
-const routes: Array<RouteRecordRaw> = [
+import HomePage from '../views/HomePage.vue';
+
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    redirect: '/home'
+    redirect: '/home',
   },
   {
     path: '/home',
     name: 'Home',
-    component: HomePage
+    component: HomePage,
   },
   {
     path: '/message/:id',
-    component: () => import('../views/ViewMessagePage.vue')
-  }
-]
+    component: () => import('../views/ViewMessagePage.vue'),
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;
diff --git a/vue-vite/official/list/src/views/ViewMessagePage.vue b/vue-vite/official/list/src/views/ViewMessagePage.vue
index 38b7ca6ea..672bfd663 100644
--- a/vue-vite/official/list/src/views/ViewMessagePage.vue
+++ b/vue-vite/official/list/src/views/ViewMessagePage.vue
@@ -25,7 +25,11 @@
       <div class="ion-padding">
         <h1>{{ message.subject }}</h1>
         <p>
-          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.
+          Lorem ipsum dolor sit amet, consectetur adipisicing elit, sed do eiusmod tempor incididunt ut labore et dolore
+          magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo
+          consequat. Duis aute irure dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla
+          pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id
+          est laborum.
         </p>
       </div>
     </ion-content>
@@ -72,7 +76,7 @@ ion-label {
 
 ion-item h2 {
   font-weight: 600;
-  
+
   /**
    * With larger font scales
    * the date/time should wrap to the next
diff --git a/vue-vite/official/list/tests/e2e/app.spec.ts b/vue-vite/official/list/tests/e2e/app.spec.ts
new file mode 100644
index 000000000..c53b3b061
--- /dev/null
+++ b/vue-vite/official/list/tests/e2e/app.spec.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('ion-header').first()).toContainText('Inbox');
+});
diff --git a/vue-vite/official/list/tests/e2e/specs/test.cy.ts b/vue-vite/official/list/tests/e2e/specs/test.cy.ts
deleted file mode 100644
index ca9d288ba..000000000
--- a/vue-vite/official/list/tests/e2e/specs/test.cy.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('ion-header', 'Inbox')
-  })
-})
diff --git a/vue-vite/official/list/tests/unit/example.spec.ts b/vue-vite/official/list/tests/unit/example.spec.ts
index 999e2bf61..3ac022c59 100644
--- a/vue-vite/official/list/tests/unit/example.spec.ts
+++ b/vue-vite/official/list/tests/unit/example.spec.ts
@@ -1,10 +1,11 @@
-import { mount } from '@vue/test-utils'
-import HomePage from '@/views/HomePage.vue'
-import { describe, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+
+import HomePage from '@/views/HomePage.vue';
 
 describe('HomePage.vue', () => {
   test('renders home view', () => {
-    const wrapper = mount(HomePage)
-    expect(wrapper.text()).toMatch('Inbox')
-  })
-})
+    const wrapper = mount(HomePage);
+    expect(wrapper.text()).toMatch('Inbox');
+  });
+});
diff --git a/vue-vite/official/sidemenu/ionic.starter.json b/vue-vite/official/sidemenu/ionic.starter.json
index 03aac50c5..824dc06e5 100644
--- a/vue-vite/official/sidemenu/ionic.starter.json
+++ b/vue-vite/official/sidemenu/ionic.starter.json
@@ -7,6 +7,6 @@
     "www"
   ],
   "scripts": {
-    "test": "npm run build && npm run test:unit -- --watch=false && npm i --no-save concurrently && ./node_modules/.bin/concurrently \"npm run dev\" \"npm run test:e2e\" --kill-others --success first"
+    "test": "npm run lint && npm run build && npm run test:unit && npx playwright install --with-deps chromium && npm run test:e2e"
   }
 }
diff --git a/vue-vite/official/sidemenu/src/App.vue b/vue-vite/official/sidemenu/src/App.vue
index 8ded5dcfa..efce9adda 100644
--- a/vue-vite/official/sidemenu/src/App.vue
+++ b/vue-vite/official/sidemenu/src/App.vue
@@ -8,7 +8,15 @@
             <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-item
+                @click="selectedIndex = i"
+                router-direction="root"
+                :router-link="p.url"
+                lines="none"
+                :detail="false"
+                class="hydrated"
+                :class="{ selected: selectedIndex === i }"
+              >
                 <ion-icon aria-hidden="true" slot="start" :ios="p.iosIcon" :md="p.mdIcon"></ion-icon>
                 <ion-label>{{ p.title }}</ion-label>
               </ion-item>
diff --git a/vue-vite/official/sidemenu/src/router/index.ts b/vue-vite/official/sidemenu/src/router/index.ts
index 99d2d5e05..cb504a801 100644
--- a/vue-vite/official/sidemenu/src/router/index.ts
+++ b/vue-vite/official/sidemenu/src/router/index.ts
@@ -1,20 +1,20 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
+import type { RouteRecordRaw } from 'vue-router';
 
-const routes: Array<RouteRecordRaw> = [
+const routes: RouteRecordRaw[] = [
   {
     path: '',
-    redirect: '/folder/Inbox'
+    redirect: '/folder/Inbox',
   },
   {
     path: '/folder/:id',
-    component: () => import ('../views/FolderPage.vue')
-  }
-]
+    component: () => import('../views/FolderPage.vue'),
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;
diff --git a/vue-vite/official/sidemenu/src/views/FolderPage.vue b/vue-vite/official/sidemenu/src/views/FolderPage.vue
index 613079ce2..d79ec4e88 100644
--- a/vue-vite/official/sidemenu/src/views/FolderPage.vue
+++ b/vue-vite/official/sidemenu/src/views/FolderPage.vue
@@ -18,7 +18,12 @@
 
       <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>
+        <p>
+          Explore
+          <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components"
+            >UI Components</a
+          >
+        </p>
       </div>
     </ion-content>
   </ion-page>
diff --git a/vue-vite/official/sidemenu/tests/e2e/app.spec.ts b/vue-vite/official/sidemenu/tests/e2e/app.spec.ts
new file mode 100644
index 000000000..11cd138af
--- /dev/null
+++ b/vue-vite/official/sidemenu/tests/e2e/app.spec.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('#container')).toContainText('Inbox');
+});
diff --git a/vue-vite/official/sidemenu/tests/e2e/specs/test.cy.ts b/vue-vite/official/sidemenu/tests/e2e/specs/test.cy.ts
deleted file mode 100644
index 4f3230bb4..000000000
--- a/vue-vite/official/sidemenu/tests/e2e/specs/test.cy.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/folder/Inbox')
-    cy.contains('#container', 'Inbox')
-  })
-})
diff --git a/vue-vite/official/sidemenu/tests/unit/example.spec.ts b/vue-vite/official/sidemenu/tests/unit/example.spec.ts
index c8d9b7415..47861c808 100644
--- a/vue-vite/official/sidemenu/tests/unit/example.spec.ts
+++ b/vue-vite/official/sidemenu/tests/unit/example.spec.ts
@@ -1,21 +1,22 @@
-import { mount } from '@vue/test-utils'
-import FolderPage from '@/views/FolderPage.vue'
-import { describe, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+
+import FolderPage from '@/views/FolderPage.vue';
 
 describe('FolderPage.vue', () => {
   test('renders folder view', () => {
     const mockRoute = {
       params: {
-        id: 'Outbox'
-      }
-    }
+        id: 'Outbox',
+      },
+    };
     const wrapper = mount(FolderPage, {
       global: {
         mocks: {
-          $route: mockRoute
-        }
-      }
-    })
-    expect(wrapper.text()).toMatch('Explore UI Components')
-  })
-})
+          $route: mockRoute,
+        },
+      },
+    });
+    expect(wrapper.text()).toMatch('Explore UI Components');
+  });
+});
diff --git a/vue-vite/official/tabs/ionic.starter.json b/vue-vite/official/tabs/ionic.starter.json
index f1a8c9dd5..8088c9a9a 100644
--- a/vue-vite/official/tabs/ionic.starter.json
+++ b/vue-vite/official/tabs/ionic.starter.json
@@ -7,6 +7,6 @@
     "www"
   ],
   "scripts": {
-    "test": "npm run build && npm run test:unit -- --watch=false && npm i --no-save concurrently && ./node_modules/.bin/concurrently \"npm run dev\" \"npm run test:e2e\" --kill-others --success first"
+    "test": "npm run lint && npm run build && npm run test:unit && npx playwright install --with-deps chromium && npm run test:e2e"
   }
 }
diff --git a/vue-vite/official/tabs/src/components/ExploreContainer.vue b/vue-vite/official/tabs/src/components/ExploreContainer.vue
index 6b1376047..a7afd9010 100644
--- a/vue-vite/official/tabs/src/components/ExploreContainer.vue
+++ b/vue-vite/official/tabs/src/components/ExploreContainer.vue
@@ -1,7 +1,10 @@
 <template>
   <div id="container">
     <strong>{{ name }}</strong>
-    <p>Explore <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a></p>
+    <p>
+      Explore
+      <a target="_blank" rel="noopener noreferrer" href="https://ionicframework.com/docs/components">UI Components</a>
+    </p>
   </div>
 </template>
 
diff --git a/vue-vite/official/tabs/src/router/index.ts b/vue-vite/official/tabs/src/router/index.ts
index a05a776e8..371f40d0e 100644
--- a/vue-vite/official/tabs/src/router/index.ts
+++ b/vue-vite/official/tabs/src/router/index.ts
@@ -1,11 +1,12 @@
 import { createRouter, createWebHistory } from '@ionic/vue-router';
-import { RouteRecordRaw } from 'vue-router';
-import TabsPage from '../views/TabsPage.vue'
+import type { RouteRecordRaw } from 'vue-router';
 
-const routes: Array<RouteRecordRaw> = [
+import TabsPage from '../views/TabsPage.vue';
+
+const routes: RouteRecordRaw[] = [
   {
     path: '/',
-    redirect: '/tabs/tab1'
+    redirect: '/tabs/tab1',
   },
   {
     path: '/tabs/',
@@ -13,27 +14,27 @@ const routes: Array<RouteRecordRaw> = [
     children: [
       {
         path: '',
-        redirect: '/tabs/tab1'
+        redirect: '/tabs/tab1',
       },
       {
         path: 'tab1',
-        component: () => import('@/views/Tab1Page.vue')
+        component: () => import('@/views/Tab1Page.vue'),
       },
       {
         path: 'tab2',
-        component: () => import('@/views/Tab2Page.vue')
+        component: () => import('@/views/Tab2Page.vue'),
       },
       {
         path: 'tab3',
-        component: () => import('@/views/Tab3Page.vue')
-      }
-    ]
-  }
-]
+        component: () => import('@/views/Tab3Page.vue'),
+      },
+    ],
+  },
+];
 
 const router = createRouter({
   history: createWebHistory(import.meta.env.BASE_URL),
-  routes
-})
+  routes,
+});
 
-export default router
+export default router;
diff --git a/vue-vite/official/tabs/tests/e2e/app.spec.ts b/vue-vite/official/tabs/tests/e2e/app.spec.ts
new file mode 100644
index 000000000..338de5e3e
--- /dev/null
+++ b/vue-vite/official/tabs/tests/e2e/app.spec.ts
@@ -0,0 +1,6 @@
+import { expect, test } from '@playwright/test';
+
+test('visits the app root url', async ({ page }) => {
+  await page.goto('/');
+  await expect(page.locator('ion-content')).toContainText('Tab 1 page');
+});
diff --git a/vue-vite/official/tabs/tests/e2e/specs/test.cy.ts b/vue-vite/official/tabs/tests/e2e/specs/test.cy.ts
deleted file mode 100644
index e858f0752..000000000
--- a/vue-vite/official/tabs/tests/e2e/specs/test.cy.ts
+++ /dev/null
@@ -1,6 +0,0 @@
-describe('My First Test', () => {
-  it('Visits the app root url', () => {
-    cy.visit('/')
-    cy.contains('ion-content', 'Tab 1 page')
-  })
-})
diff --git a/vue-vite/official/tabs/tests/unit/example.spec.ts b/vue-vite/official/tabs/tests/unit/example.spec.ts
index 2ad3d3dcf..9bbf8d2cc 100644
--- a/vue-vite/official/tabs/tests/unit/example.spec.ts
+++ b/vue-vite/official/tabs/tests/unit/example.spec.ts
@@ -1,10 +1,11 @@
-import { mount } from '@vue/test-utils'
-import Tab1Page from '@/views/Tab1Page.vue'
-import { describe, expect, test } from 'vitest'
+import { mount } from '@vue/test-utils';
+import { describe, expect, test } from 'vitest';
+
+import Tab1Page from '@/views/Tab1Page.vue';
 
 describe('Tab1Page.vue', () => {
   test('renders tab 1 Tab1Page', () => {
-    const wrapper = mount(Tab1Page)
-    expect(wrapper.text()).toMatch('Tab 1 page')
-  })
-})
+    const wrapper = mount(Tab1Page);
+    expect(wrapper.text()).toMatch('Tab 1 page');
+  });
+});