ionic-framework: bug: vue v6 with vue 3.1.0 overrides properties and event emitters
Bug Report
Ionic version:
[ ] 4.x [ ] 5.x [ x] 6.x
Current behavior: Using the ion-title component in the v6 vue beta leads to the following console error: “Cannot read property ‘emit’ of undefined”. The component itself gets rendered, and it seems to work - it just throws an error
EDIT: Same error happens to the ion-menu component.

Expected behavior: No error should be thrown
Steps to reproduce:
- Create a new ionic vue project
- Upgrade to v6 beta according to upgrade guide
- Serve project and open app in browser
- Check console
Related code:
https://github.com/tho-masn/ionic-ion-title-bug
Other information:
Ionic info:
[WARN] Error loading @capacitor/ios package.json: Error: Cannot find module '@capacitor/ios/package'
Require stack:
- /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
- /usr/local/lib/node_modules/@ionic/cli/lib/index.js
- /usr/local/lib/node_modules/@ionic/cli/index.js
- /usr/local/lib/node_modules/@ionic/cli/bin/ionic
[WARN] Error loading @capacitor/android package.json: Error: Cannot find module '@capacitor/android/package'
Require stack:
- /usr/local/lib/node_modules/@ionic/cli/lib/project/index.js
- /usr/local/lib/node_modules/@ionic/cli/lib/index.js
- /usr/local/lib/node_modules/@ionic/cli/index.js
- /usr/local/lib/node_modules/@ionic/cli/bin/ionic
Ionic:
Ionic CLI : 6.16.3 (/usr/local/lib/node_modules/@ionic/cli)
Ionic Framework : @ionic/vue 6.0.0-beta.0
Capacitor:
Capacitor CLI : 3.0.2
@capacitor/android : not installed
@capacitor/core : 3.0.2
@capacitor/ios : not installed
Utility:
cordova-res : not installed globally
native-run : 1.4.0
System:
NodeJS : v14.8.0 (/usr/local/Cellar/node/14.8.0/bin/node)
npm : 6.14.7
OS : macOS Big Sur
About this issue
- Original URL
- State: closed
- Created 3 years ago
- Reactions: 2
- Comments: 15 (7 by maintainers)
Commits related to this issue
- Revert to vue@3.0.11 for now because of a breaking change See https://github.com/ionic-team/ionic-framework/issues/23539 Also revert back to kebab-case events — committed to paqtcom/graphite-design-system by elwinvaneede 3 years ago
- fix(vue): custom element internal properties are no longer overridden in vue 3.1.0 (#23738) resolves #23539 — committed to ionic-team/ionic-framework by liamdebeasi 3 years ago
@liamdebeasi Fixed it!
Thanks! Can you give this updated dev build a shot?
Try deleting your
node_modulesand reinstalling. Also make sure in yourpackage-lock.jsonfile thatvue@3.0.11is getting installed. Downgrading to that version fixed the issue on my end.Thanks for the issue. This has been resolved via https://github.com/ionic-team/ionic-framework/pull/23738, and a fix will be available in an upcoming release of Ionic Framework.
Please feel free to continue testing the dev build in https://github.com/ionic-team/ionic-framework/issues/23539#issuecomment-894506787, and let me know if you experience any other issues.
@liamdebeasi: Thanks, for me this indeed fixes the issue. @jakubkoje: I assume the reason why it is not working for you is because of the caret in your package.json, which updates to the latest minor vue version again if you remove the package-lock.json file.
Stick to the old vue version by using this line should resolve the issue: