From a7e5cd62ff63e295248507dafe4c689e6f308d79 Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 11 Feb 2022 14:44:20 +0000
Subject: [PATCH 1/2] fix(vue): preserve custom classes on IonPage

---
 packages/vue/src/components/IonPage.ts        |  3 +-
 packages/vue/test-app/tests/unit/page.spec.ts | 39 +++++++++++++++++++
 2 files changed, 41 insertions(+), 1 deletion(-)
 create mode 100644 packages/vue/test-app/tests/unit/page.spec.ts

diff --git a/packages/vue/src/components/IonPage.ts b/packages/vue/src/components/IonPage.ts
index 107fbafcd82..789e1516bd4 100644
--- a/packages/vue/src/components/IonPage.ts
+++ b/packages/vue/src/components/IonPage.ts
@@ -12,11 +12,12 @@ export const IonPage = /*@__PURE__*/ defineComponent({
   setup(props, { attrs, slots }) {
     const hidePageClass = (props.isInOutlet) ? 'ion-page-invisible' : '';
     return () => {
+      const existingClasses = attrs.class ?? '';
       return h(
         'div',
         {
-          ['class']: `ion-page ${hidePageClass}`,
           ...attrs,
+          ['class']: `ion-page ${hidePageClass} ${existingClasses}`,
           ref: 'ionPage'
         },
         slots.default && slots.default()
diff --git a/packages/vue/test-app/tests/unit/page.spec.ts b/packages/vue/test-app/tests/unit/page.spec.ts
new file mode 100644
index 00000000000..d3411a195f4
--- /dev/null
+++ b/packages/vue/test-app/tests/unit/page.spec.ts
@@ -0,0 +1,39 @@
+import { mount } from '@vue/test-utils';
+import { createRouter, createWebHistory } from '@ionic/vue-router';
+import { IonicVue, IonApp, IonRouterOutlet, IonPage } from '@ionic/vue';
+
+const App = {
+  components: { IonApp, IonRouterOutlet },
+  template: '<ion-app><ion-router-outlet /></ion-app>',
+}
+
+describe('IonPage', () => {
+  beforeAll(() => {
+    (HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
+  });
+  it('should preserve custom classes', async () => {
+    const Page1 = {
+      template: '<ion-page class="custom-class"></ion-page>',
+      components: { IonPage }
+    };
+
+    const router = createRouter({
+      history: createWebHistory(process.env.BASE_URL),
+      routes: [
+        { path: '/', component: Page1 }
+      ]
+    });
+
+    router.push('/');
+    await router.isReady();
+    const wrapper = mount(App, {
+      global: {
+        plugins: [router, IonicVue]
+      }
+    });
+
+    const cmp = wrapper.findComponent(Page1);
+    expect(cmp.classes('ion-page')).toBe(true);
+    expect(cmp.classes('custom-class')).toBe(true);
+  });
+})

From 1d3793d0b949a769d912372401aa31c8eee794ad Mon Sep 17 00:00:00 2001
From: Liam DeBeasi <liamdebeasi@icloud.com>
Date: Fri, 11 Feb 2022 14:50:19 +0000
Subject: [PATCH 2/2] test(vue): add additional test

---
 packages/vue/test-app/tests/unit/page.spec.ts | 24 +++++++++++++++++++
 1 file changed, 24 insertions(+)

diff --git a/packages/vue/test-app/tests/unit/page.spec.ts b/packages/vue/test-app/tests/unit/page.spec.ts
index d3411a195f4..61f0bea41e2 100644
--- a/packages/vue/test-app/tests/unit/page.spec.ts
+++ b/packages/vue/test-app/tests/unit/page.spec.ts
@@ -11,6 +11,30 @@ describe('IonPage', () => {
   beforeAll(() => {
     (HTMLElement.prototype as HTMLIonRouterOutletElement).commit = jest.fn();
   });
+  it('should add ion-page class', async () => {
+    const Page1 = {
+      template: '<ion-page></ion-page>',
+      components: { IonPage }
+    };
+
+    const router = createRouter({
+      history: createWebHistory(process.env.BASE_URL),
+      routes: [
+        { path: '/', component: Page1 }
+      ]
+    });
+
+    router.push('/');
+    await router.isReady();
+    const wrapper = mount(App, {
+      global: {
+        plugins: [router, IonicVue]
+      }
+    });
+
+    const cmp = wrapper.findComponent(Page1);
+    expect(cmp.classes('ion-page')).toBe(true);
+  });
   it('should preserve custom classes', async () => {
     const Page1 = {
       template: '<ion-page class="custom-class"></ion-page>',