question-mark
Stuck on an issue?

Lightrun Answers was designed to reduce the constant googling that comes with debugging 3rd party libraries. It collects links to all the places you might be looking at while hunting down a tough bug.

And, if you’re still stuck at the end, we’re happy to hop on a call to see how we can help out.

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

See original GitHub issue

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

Issue Analytics

  • State:closed
  • Created 2 years ago
  • Comments:11 (5 by maintainers)

github_iconTop GitHub Comments

3reactions
angelhdzmultimediacommented, Mar 22, 2021

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.

image

No errors. 😍🎉🙌🤝

image

Really appreciate your time and help.

Stay healthy!

2reactions
kaorun343commented, Mar 22, 2021
  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'
}
Read more comments on GitHub >

github_iconTop Results From Across the Web

Pinia getters throw runtime error after migrating to vue3 from ...
I'm trying to migrate an old app that used to run on vuex3+vue2+typescript+vue-property-decorator, to a vue3+pinia+typescript solution.
Read more >
Define properties with Vue Property Decorator and TypeScript
Define properties like data, methods, and watchers directly on the class in Vue components with Vue Property Decorator and TypeScript.
Read more >
Vue Typescript: How to use it successfully - ArrowHiTech Blog
Even if you don't explicitly type the types, they are still there to save you from doing something which otherwise would result in...
Read more >
Class Components with JSX in NuxtJS - Damir's Corner
Any errors will only be reported at runtime. Currently, the only way to achieve compile-time type safety is to use render functions with...
Read more >
Building SharePoint client web part with Vue.js and single-file ...
npm install vue vue-class-component vue-property-decorator ... client web part project (note: we are adding runtime version of vue.js, ...
Read more >

github_iconTop Related Medium Post

No results found

github_iconTop Related StackOverflow Question

No results found

github_iconTroubleshoot Live Code

Lightrun enables developers to add logs, metrics and snapshots to live code - no restarts or redeploys required.
Start Free

github_iconTop Related Reddit Thread

No results found

github_iconTop Related Hackernoon Post

No results found

github_iconTop Related Tweet

No results found

github_iconTop Related Dev.to Post

No results found

github_iconTop Related Hashnode Post

No results found