IonMenu contentId attribute not recognized

[a-Leong]

In Vue 3 prerelease

I'm encountering a consistent issue where the IonMenu's required contentId attribute is not recognized. The menu does not work, an error is thrown and these messages appear in the console:

[DEPRECATED][ion-menu] Using the [main] attribute is deprecated, please use the "contentId" property instead:
BEFORE:
  <ion-menu>...</ion-menu>
  <div main>...</div>

AFTER:
  <ion-menu contentId="main-content"></ion-menu>
  <div id="main-content">...</div>

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

Inspecting the IonMenu element, the attribute is contentid(incorrectly cased). Occasionally, hot-reloading after a modification to the file containing the IonMenu temporarily fixes the issue and in those cases the attribute is correctly content-id.

Replicated in sample app:

"@ionic/core": "^5.3.1",
"@modus/ionic-vue": "^3.0.0-alpha.13",
"vue": "^3.0.0-rc.5",

<template>
  <ion-app>
    <!--
    kebab-case produces same behavior
    <ion-menu content-id="main-content"></ion-menu>
    -->
    <ion-menu contentId="main-content"></ion-menu>
    <ion-content id="main-content">
      <ion-menu-button />
    </ion-content>
  </ion-app>
</template>

<script>
import { IonApp, IonMenu, IonContent, IonMenuButton } from '@modus/ionic-vue'

export default {
  name: 'App',
  components: {
    IonApp,
    IonMenu,
    IonContent,
    IonMenuButton,
  },
}
</script>

import { createApp } from 'vue'
import { IonicVue, createRouter } from '@modus/ionic-vue'
import { createWebHistory } from 'vue-router'
import App from './App.vue'
import '@ionic/core/css/ionic.bundle.css'

const router = createRouter({
  history: createWebHistory(),
  routes: [
    {
      path: '/',
      component: App,
    },
  ],
})

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

[michaeltintiuc]

Thanks for creating the issue, this should be fixed soon with a newer version of ionic/core, the issue as you've noticed is the casing, unfortunately with Vue3 it's impossible (at least for the time being) to force prop and event casing, I've worked with the ionic team on this and the result is the ability to define custom casing when registering custom elements. I plan on getting this resolved within a few days as tops.

[michaeltintiuc]

I've just looked at it again and it doesn't have to do with anything I've described above, will try to reproduce it locally, have you tried using IonMenu instead of ion-menu?

[a-Leong]

Yes, same issue using IonMenu

[michaeltintiuc]

I've just tried with the same versions as you, everything seems to be working just fine, here's the ionic/vue3 examples app I'm testing everything with: https://github.com/michaeltintiuc/ionic-vue-3-example

[michaeltintiuc]

Try removing node_modules and reinstalling, for some reason it seems like updating to newer versions without doing that breaks stuff

[a-Leong]

I had tried removing and reinstalling node_modules, but after your suggestion I removed package-lock.json as well and that did the trick. Thanks so much for your help!

Edit: This also resolved several other inexplicable issues and warnings 🤩

[michaeltintiuc]

Happy to help!