[ERROR] Runtime Error with Vue and Component classes of vue-property-decorator package

Describe the bug Error in the browser’s console when running the Ionic Vue web app demo.

To Reproduce Steps to reproduce the behavior:

1. 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

[angelhdzmultimedia]

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!

[kaorun343]

1. Which version of vue , vue-class-component and vue-property-decorator are you using? If you’re using Vue 3, then you need to install vue-class-component@8-rc, and vue-property-decorator@10-rc . Also, @Options decorator should be used.
2. In setup function, this is not available. Also, setup function should be defined at @Options decorator. In your case, setup is not needed.

import { Options, Vue } from 'vue-property-decorator'
// Or
import { Options, Vue } from 'vue-class-component'

@Options({
  components: {
    // child components
  },
  name: 'Home'
})
export default class Home extends Vue {
  public title = 'Home'
}