fix(vue): preserve custom classes on IonPage (#24776)

resolves #24772

Co-authored-by: bnachtweh <[email protected]>

Author: liamdebeasi

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()

packages/vue/test-app/tests/unit/page.spec.ts

@@ -0,0 +1,63 @@
+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 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>',
+      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);
+  });
+})