[ERROR] Runtime Error with Vue and Component classes of vue-property-decorator package
See original GitHub issueDescribe the bug Error in the browser’s console when running the Ionic Vue web app demo.
To Reproduce Steps to reproduce the behavior:
- Create the Ionic Vue demo project and running the web app.
Expected behavior Running the web app without errors.
Screenshots If applicable, add screenshots to help explain your problem. Screenshots here https://github.com/calebeaires/vue-decorator/issues/3
Desktop (please complete the following information):
- Windows 10 Version 10.0.19042 Build 19042
- Chrome: 89.0.4389.90 (Official Build) (64-bit)
- VSCode : 1.54.3
"dependencies": {
"@capacitor/android": "^2.4.7",
"@capacitor/core": "2.4.7",
"@ionic/vue": "^5.6.1",
"@ionic/vue-router": "^5.4.0",
"core-js": "^3.6.5",
"vue": "^3.0.0-0",
"vue-decorator": "^1.1.2",
"vue-router": "^4.0.0-0"
},
"devDependencies": {
"@babel/plugin-proposal-class-properties": "^7.13.0",
"@babel/plugin-proposal-decorators": "^7.13.5",
"@capacitor/cli": "2.4.7",
"@types/jest": "^24.0.19",
"@typescript-eslint/eslint-plugin": "^2.33.0",
"@typescript-eslint/parser": "^2.33.0",
"@vue/cli-plugin-babel": "~4.5.0",
"@vue/cli-plugin-e2e-cypress": "~4.5.0",
"@vue/cli-plugin-eslint": "~4.5.0",
"@vue/cli-plugin-router": "~4.5.0",
"@vue/cli-plugin-typescript": "~4.5.0",
"@vue/cli-plugin-unit-jest": "~4.5.0",
"@vue/cli-service": "~4.5.0",
"@vue/compiler-sfc": "^3.0.0-0",
"@vue/eslint-config-typescript": "^5.0.2",
"@vue/test-utils": "^2.0.0-0",
"eslint": "^6.7.2",
"eslint-plugin-vue": "^7.0.0-0",
"typescript": "~3.9.3",
"vue-class-component": "^8.0.0-rc.1",
"vue-jest": "^5.0.0-0"
}
Smartphone (please complete the following information):
- Device: [e.g. iPhone6]
- OS: [e.g. iOS8.1]
- Browser [e.g. stock browser, safari]
- Version [e.g. 22]
Additional context I tried vue-property-decorator for many days with no success. Until I installed vue-decorator package and used its Vue and Options classes. I want to use vue-property-decorator because all the tutorials I’ve read us it, I don’t want to rely on vue-decorator because it doesn’t seem active. More context here https://github.com/calebeaires/vue-decorator/issues/3
Issue Analytics
- State:
- Created 2 years ago
- Comments:11 (5 by maintainers)
Solved
I installed vue-property-decorator 10.0.0-rc.3 and ran npm install, and now I can get the Options and Vue classes directly from the vue-class-component package. I couldn’t unpack/deconstruct them before. I don’t know if installing latest vue-property-decorator was the solution, or if npm failed to install version @8-rc of vue-class-component.
So, it’s finally Solved I guess…
Last Words
Let me add, that I can use setup method in the class itself and not in Options, and can use the “this” keyword in it.
No errors. 😍🎉🙌🤝
Really appreciate your time and help.
Stay healthy!
vue
,vue-class-component
andvue-property-decorator
are you using? If you’re using Vue 3, then you need to installvue-class-component@8-rc
, andvue-property-decorator@10-rc
. Also,@Options
decorator should be used.setup
function,this
is not available. Also,setup
function should be defined at@Options
decorator. In your case,setup
is not needed.