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

🐛 The bug

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

Menu component bug. Copy paste from https://ionicframework.com/docs/api/menu
ionic menu component to app.vue:
Only render first time then when refresh error appears "Menu: must have a "content" element to listen for drag events on."

🛠️ To reproduce

https://stackblitz.com/github/nuxt-modules/ionic/tree/main/playground?file=package.json

🌈 Expected behaviour

render ok when refresh

ℹ️ Additional context

{
"name": "nuxt-ionic-project",
"version": "0.0.1",
"private": true,
"scripts": {
"build": "nuxt build",
"dev": "nuxt dev",
"generate": "nuxt generate",
"preview": "nuxt preview",
"postinstall": "nuxt prepare",
"ionic:build": "npm run build",
"ionic:serve": "npm run dev"
},
"devDependencies": {
"@nuxtjs/supabase": "^0.3.0",
"nuxt": "^3.2.2"
},
"dependencies": {
"@capacitor/android": "4.6.3",
"@capacitor/app": "4.1.1",
"@capacitor/camera": "4.1.4",
"@capacitor/cli": "4.6.3",
"@capacitor/core": "4.6.3",
"@capacitor/haptics": "4.1.0",
"@capacitor/keyboard": "4.1.1",
"@capacitor/status-bar": "4.1.1",
"@nuxtjs/ionic": "^0.8.1",
"@pinia/nuxt": "^0.4.6",
"@supabase/supabase-js": "^2.4.0"
}
}

Start with the Ionic menu usage in app.vue and reproduce the refresh failure in the linked StackBlitz playground. Trace when the menu is initialized during Nuxt rendering, then verify that refreshing the page renders successfully without the “content” element error.