VueJS + TypeScript decorator issue

Question

I have a strange issue just with creating a new app with the vue-cli : the HelloWorld component has an error with decorators. I did not touch to anything, all the code and configuration comes from the vue-cli.

Here is the error:

ERROR in /Users/JohnSmith/test/src/components/HelloWorld.vue
37:1 Unable to resolve signature of class decorator when called as an expression.
  Type '<VC extends VueClass<Vue>>(target: VC) => VC' is missing the following properties from type 'typeof HelloWorld': extend, nextTick, set, delete, and 7 more.
    35 | import { Component, Prop, Vue } from 'vue-property-decorator';
    36 | 
  > 37 | @Component
       | ^
    38 | export default class HelloWorld extends Vue {
    39 |   @Prop() private msg!: string;
    40 | }

I have found this workaround:

@Component({
  props: {
    msg: {type: String},
  },
})
export default class HelloWorld extends Vue {
  // @Prop() private msg!: string;
}

But I would like to use the decorators, and this is not normal to have errors with the generated dummy project.

This is my environment:

macOS High Sierra 10.13.6
node v11.3.0 (with brew)
npm 6.4.1
yarn 1.12.3 (with brew)
Vue CLI v3.2.1
brew doctor is fine

And here are the vue-cli options I used for creating the project:

? Please pick a preset: Manually select features
? Check the features needed for your project: Babel, TS, PWA, Router, Vuex, CSS Pre-processors, Linter
? Use class-style component syntax? Yes
? Use Babel alongside TypeScript for auto-detected polyfills? Yes
? Use history mode for router? (Requires proper server setup for index fallback in production) Yes
? Pick a CSS pre-processor (PostCSS, Autoprefixer and CSS Modules are supported by default): Sass/SCSS
? Pick a linter / formatter config: TSLint
? Pick additional lint features: (Press <space> to select, <a> to toggle all, <i> to invert selection)Lint on save
? Where do you prefer placing config for Babel, PostCSS, ESLint, etc.? In dedicated config files
? Save this as a preset for future projects? No

I did not find any info about this issue anywhere.

Were does it come from ?

Thanks for your help!

Here is the issue about this on github: github.com/vuejs/vue-class-component/issues/294. It is already fixed and will be released soon and there is also a workaround for this: github.com/vuejs/vue-class-component/issues/… — nemesv
– nemesv, Commented Dec 10, 2018 at 11:54

Gooody · Accepted Answer · 2020-06-07 18:01:32Z

2

Try to import Vue from vue ... like:

import Vue from 'vue';
@Component
export default class HelloWorld extends Vue {
  @Prop() private msg!: string;
}

answered Jun 7, 2020 at 18:01

Gooody

411 silver badge6 bronze badges

Sign up to request clarification or add additional context in comments.

Collectives™ on Stack Overflow

VueJS + TypeScript decorator issue

1 Answer 1

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

Comments

Your Answer

Sign up or log in

Post as a guest

Related