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

[jcrobles76]

🐛 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"
}
}

[aaronksaunders]

@jcrobles76 not sure where your code is because this link points to the basic sample, but here is how I implemented a menu a few months ago when I was checking out ionic-nuxt https://stackblitz.com/edit/nuxt-starter-rqvhxt?file=pages%2FHome.vue

[jcrobles76]

Ey!! Mr. @aaronksaunders It's an honor to be able to greet you! I follow your tutorials in youtube channel. You work is great!! Thank you very much for your reply!!. Finally was fixed by modifying ssr to false in "nunxt.config.ts" and works like a charm:

export default defineNuxtConfig({
ssr: false,
modules: [
'@nuxtjs/ionic',
'@nuxtjs/supabase',
['@pinia/nuxt',{
autoImports: [
'defineStore',
['defineStore','definePiniaStore']
]
}]
],
css: [
'~/assets/css/ionic.css',
'@ionic/core/css/core.css',
'@ionic/core/css/normalize.css',
'@ionic/core/css/structure.css',
'@ionic/core/css/typography.css',
'@ionic/core/css/ionic.bundle.css',
],
runtimeConfig: {
public: {
SUPABASE_URL: process.env.SUPABASE_URL,
SUPABASE_ANON_KEY: process.env.SUPABASE_ANON_KEY,
},
},
})

[jcrobles76]

Hi friends,
Now I have a new problem with "ion-tabs component" not works and multiples warnings with routes when I try to build this with nuxt3 and Ionic: https://ionicframework.com/docs/api/tabs
How can I do in order to works in in nuxt 3 with ionic and navigation. Any stackbliz implements would be great!
Thank you!!

[aaronksaunders]

Would be helpful if you provided your sample project

On Tue, Feb 28, 2023 at 5:37 PM jcrobles76 ***@***.***> wrote: Hi friends, Now I have a new problem with "ion-tabs component" not works and multiples warnings with routes when I try to build this with nuxt3 and Ionic: https://ionicframework.com/docs/api/tabs How can I do in order to works in in nuxt 3 with ionic and navigation. Any stackbliz implements would be great! Thank you!! — Reply to this email directly, view it on GitHub <#255 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEAFGIWZMDT6FYRFR4PAZDWZZ42VANCNFSM6AAAAAAVCL2PYU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

--

…

-- Aaron K. Saunders CEO Clearly Innovative Inc ***@***.*** www.clearlyinnovative.com This email message and any attachment(s) are for the sole use of the intended recipient(s) and may contain proprietary and/or confidential information which may be privileged or otherwise protected from disclosure. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient(s), please contact the sender by reply email and destroy the original message and any copies of the message as well as any attachment(s) to the original message.

[jcrobles76]

Yes, sure!. I have sent you an invitation! to my repository. You can view the problems with ion-tabs implementations in "Develop_Tabs" branch. Thank you again mr. @aaronksaunders !!

[robotex82]

I am seeing that error message too, in nuxt3 and pure vue3. This seems to help on vue3: ionic-team/ionic-framework#23031 (comment)

As nuxt3 does not expose app.mount how would one implement this workaround?

[aaronksaunders]

Would be helpful to see what you are trying to do

On Sat, Apr 1, 2023 at 9:20 AM Roberto Vasquez Angel < ***@***.***> wrote: I am seeing that error message too, in nuxt3 and pure vue3. This seems to help on vue3: ionic-team/ionic-framework#23031 (comment) <ionic-team/ionic-framework#23031 (comment)> As nuxt3 does not expose app.mount how would one implement this workaround? — Reply to this email directly, view it on GitHub <#255 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/AAEAFGME2MBZTDPSKHYX54LW7ATSPANCNFSM6AAAAAAVCL2PYU> . You are receiving this because you were mentioned.Message ID: ***@***.***>

--

…

-- Aaron K. Saunders CEO Clearly Innovative Inc ***@***.*** www.clearlyinnovative.com This email message and any attachment(s) are for the sole use of the intended recipient(s) and may contain proprietary and/or confidential information which may be privileged or otherwise protected from disclosure. Any unauthorized review, use, disclosure or distribution is prohibited. If you are not the intended recipient(s), please contact the sender by reply email and destroy the original message and any copies of the message as well as any attachment(s) to the original message.

[danielroe]

We could implement that fix in this module, but I need a reproduction so I can add a regression test and confirm that things work 👌