Vue + Typescript - Import Errors With Class Based Decorators

I'm trying to set up Vue 3 with TypeScript and class-based components. However, I keep getting on error on importing the Component decorator the Vue constructor: This expression i

Solution 1:

You might be trying to use the example from the official vue-class-component docs, but that's currently for the 7x version, which can only be used with Vue 2.

Vue 3 requires vue-class-component8x, which is not yet documented, but you can refer to vue-class-component Issue #406 that describes the changes. The notices relevant to your question:

• @Component will be renamed to @Options.
• @Options is optional if you don't declare any options with it.
• Vue constructor is provided from vue-class-component package.

Since your component has no options, you could just omit the @Options decorator from your component:

// BEFORE:importComponentfrom'vue-class-component'
@Componentclass {}

// AFTER:/* no options used, so no @Options decorator needed */class {}

Also, Vue 3 no longer exports the Vue constructor, but vue-class-component does, so your component would have to extend that instead:

// BEFORE:importVuefrom'vue'// AFTER:import { Vue } from'vue-class-component'

For reference, you can use Vue CLI to generate a Vue 3 + TypeScript project to play with a working example that uses the latest vue-class-component as described above.

Solution 2:

With a decorator, you don't need ({}). Try

<scriptlang="ts">importVuefrom'vue'importComponentfrom'vue-class-component'

@Component// 1st Error '@Component'exportdefaultclassProdItemextendsVue { // 2nd error 'Vue'
  
}
</script>

Solution 3:

Based on this issue and this one you could do :

<scriptlang="ts">import {vue} from'vue-class-component'exportdefaultclassProdItemextendsVue { 
  
}
</script>