bug: Menu: must have a "content" element to listen for drag events on.

Bug Report

Ionic version: [x] 5.x

Current behavior: Creating a Vue component with the ion-menu ui component results in above error. Below code is from my Home.vue, which is embedded in App.vue, which has the ion-app enclosing tags.

Expected behavior: The ionic-menu component would be displaying and clickable.

Steps to reproduce: Unsure. I have different test applications with ion-menu, and neither of them work.

Related code:

        <template>
          <ion-page>
        
              <ion-header>
                <ion-toolbar>
                  <ion-buttons slot="start">
                    <ion-menu-button
                      auto-hide="false"
                      menu="testmenu"
                    ></ion-menu-button>
                  </ion-buttons>
                </ion-toolbar>
              </ion-header>
        
              <ion-menu menu-id="testmenu" content-id="mycontent">
                <ion-content>
                  <ion-list>
                    <ion-item type="button">
                      <ion-label>Pokémon Yellow</ion-label>
                    </ion-item>
                  </ion-list>
                </ion-content>
              </ion-menu>
        
              <ion-content id="mycontent"> Router Outlet </ion-content>
        
          </ion-page>
        </template>

        <script>
        import {
          IonToolbar,
          IonMenuButton,
          IonButtons,
          IonList,
          IonItem,
          IonMenu,
          IonLabel,
          IonContent,
          IonHeader,
          IonPage
        } from "@ionic/vue";
        import { defineComponent } from "vue";
        
        export default defineComponent({
          name: "App",
          components: {
            IonToolbar,
            IonMenuButton,
            IonButtons,
            IonList,
            IonItem,
            IonMenu,
            IonLabel,
            IonContent,
            IonHeader,
            IonPage
          },
        });
        </script>
        
        <style scoped >
        </style>

Other information: I have also tried the latest LTS version of node (14.x) with the latest npm, without any result.

Ionic:

   Ionic CLI       : 6.13.1 (/home/hans/.nvm/versions/node/v15.8.0/lib/node_modules/@ionic/cli)
   Ionic Framework : @ionic/vue 5.5.4

Capacitor:

   Capacitor CLI   : 2.4.6
   @capacitor/core : 2.4.6

Utility:

   cordova-res : not installed
   native-run  : not installed

System:

   NodeJS : v15.8.0 (/home/hans/.nvm/versions/node/v15.8.0/bin/node)
   npm    : 7.5.1
   OS     : Linux 5.8

[liamdebeasi]

Thanks! The issue is here:

const app = createApp(App)
  .use(IonicVue)
  
  app.mount('#app');

There seems to be some quirk with Vue 3 where mounting an app with Web Components too quickly causes issues. The reason why you are getting this error is Vue 3 is mounting <ion-menu content-id="mycontent"> as <ion-menu contentid="mycontent"> (note the missing - in contentid).

Normally waiting for the router to initialize first resolves the issue, but since you are not using the router you should try a requestAnimationFrame.

Can you try the following and let me know if it resolves the issue?

const app = createApp(App)
  .use(IonicVue)

requestAnimationFrame(() => {
  app.mount('#app');
});

[ionitron-bot[bot]]

Thanks for the issue! This issue is being locked to prevent comments that are not relevant to the original issue. If this is still an issue with the latest version of Ionic, please create a new issue and ensure the template is fully filled out.