Challenges with importing class-based decorators in Vue using Typescript

Question

Challenges with importing class-based decorators in Vue using Typescript

Currently, I am in the process of setting up Vue 3 with TypeScript and utilizing class-based components. Unfortunately, I have encountered an issue while attempting to import the Component decorator within the Vue constructor:

An error message appears stating: 'This expression is not callable. Type 'typeof
import("/Users/*folder*/node_modules/vue-class-component/dist/vue-class-component")'
has no call signatures. Vetur(2349)'

mycode.vue:

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component // Error #1 '@Component'
export default class ProdItem extends Vue { // Error #2 'Vue'
  
}
</script>

javascript typescript vue.js vuejs3

Answer 1

Answer №1

If you're following the example in the official vue-class-component documentation, keep in mind that it pertains to version 7x and is only compatible with Vue 2.

To work with Vue 3, you'll need to use vue-class-component version 8x. While there isn't documented information yet, you can check out vue-class-component Issue #406 for updates highlighting key changes:

@Component will be replaced by @Options.

@Options becomes optional if no options are declared with it.

The Vue constructor is now provided by the vue-class-component package.

If your component doesn't have any options, you can skip using the @Options decorator altogether:

// BEFORE:
import Component from 'vue-class-component'
@Component
class {}

// AFTER:
/* since no options are used, @Options decorator is not needed */
class {}

Additionally, Vue 3 no longer exports the Vue constructor directly, so you should extend it from vue-class-component instead:

// BEFORE:
import Vue from 'vue'

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

To get a hands-on experience with the latest vue-class-component setup as described above, consider using Vue CLI to generate a project with Vue 3 + TypeScript.

Answer 2

If you're following the example in the official vue-class-component documentation, keep in mind that it pertains to version 7x and is only compatible with Vue 2.

To work with Vue 3, you'll need to use vue-class-component version 8x. While there isn't documented information yet, you can check out vue-class-component Issue #406 for updates highlighting key changes:

@Component will be replaced by @Options.

@Options becomes optional if no options are declared with it.

The Vue constructor is now provided by the vue-class-component package.

If your component doesn't have any options, you can skip using the @Options decorator altogether:

// BEFORE:
import Component from 'vue-class-component'
@Component
class {}

// AFTER:
/* since no options are used, @Options decorator is not needed */
class {}

Additionally, Vue 3 no longer exports the Vue constructor directly, so you should extend it from vue-class-component instead:

// BEFORE:
import Vue from 'vue'

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

To get a hands-on experience with the latest vue-class-component setup as described above, consider using Vue CLI to generate a project with Vue 3 + TypeScript.

Answer 3

Answer №2

Eliminate the need for ({}) with a decorator. Give this code a shot:

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component  // Issue here: '@Component'
export default class ProdItem extends Vue { // Problem here: 'Vue'
  
}
</script>

Answer 4

Eliminate the need for ({}) with a decorator. Give this code a shot:

<script lang="ts">
import Vue from 'vue'
import Component from 'vue-class-component'

@Component  // Issue here: '@Component'
export default class ProdItem extends Vue { // Problem here: 'Vue'
  
}
</script>

Answer 5

Answer №3

Here's a solution for the problem presented in both this issue and this one:

<script lang="ts">

import {vue} from 'vue-class-component'


export default class ItemComponent extends Vue { 
  
}
</script>

Answer 6

Here's a solution for the problem presented in both this issue and this one:

<script lang="ts">

import {vue} from 'vue-class-component'


export default class ItemComponent extends Vue { 
  
}
</script>

Challenges with importing class-based decorators in Vue using Typescript

Answer №1

Answer №2

Answer №3

Similar questions

Issue with create-react-app and express server not displaying correctly in Internet Explorer

Transforming jQuery code to pure vanilla Javascript

"Efficiently handle JSON and binary data passing with the enhanced functionality of Express Body Parser

Is there a way to make all Bootstrap column heights equal using only jQuery?

Vue JS - Issue with rendering <tr> and <td> elements in table component

Exploring solutions for handling asynchronous issues with vue3-google-map

The attribute 'status' is not found in the 'ServerResponse' type (TS2339)

Unable to save the newly generated data into MongoDB

Can you identify the issue with the phase control in my sine wave program?

Check if an element possesses a specific property and corresponding value in JavaScript

Click on a div in AngularJS to be directed to a specific URL

A guide to accessing parent attributes in Vue3 using typescript

Challenge with Dependency Injection in the Handlers of NestJS CQRS repositories

Bug causing horizontal lines to glitch

Overlay a translucent image on top of another using JavaScript

Filtering text for highlighting in Vue.js is a breeze

Validation in Ajax Response

Clicking on the checkbox will trigger the corresponding table column to disappear

Oops! Looks like there was an issue with defining Angular in AngularJS

What is the process of creating a TypeScript interface that accommodates various schemas?