Install & Compatibility
Where this runs
tested against v? · npm install
Install × environment matrix
Each cell = how many times install + import succeeded across repeated harness runs. Partial = flaky.
glibc = Debian/Ubuntu slim · musl = Alpine Linux
muslnode 18–226 runs
build_error
glibcnode 18–226 runs
build_error
Code
Verified usage
Verified import paths — ran on the pinned version, not inferred.
Component
✓ import Component from 'vue-class-component'
✗ import { Component } from 'vue-class-component'
Component is the default export. Do not use named import destructuring.
mixins
✓ import Component, { mixins } from 'vue-class-component'
✗ import { mixins } from 'vue-class-component'
While mixins is a named export, Component (the default export) is typically imported alongside it. Note the recent compatibility fixes for mixins typing.
hooks (for IntelliSense)
✓ import 'vue-class-component/hooks'
✗ import { hooks } from 'vue-class-component'
This is a side-effect import for enhancing TypeScript IntelliSense, introduced in v7.2.1 and disabled by default to prevent breakage.
Demonstrates a basic Vue 2 component using vue-class-component, including data, props, computed properties, methods, and a lifecycle hook.
import Vue from 'vue'
import Component from 'vue-class-component'
interface MyData {
message: string
count: number
}
@Component({
props: {
propMessage: String
}
})
export default class MyComponent extends Vue {
// Initial data
message: string = 'Hello from Vue Class Component!'
count: number = 0
// Declared props
readonly propMessage!: string
// Computed property
get reversedMessage(): string {
return this.message.split('').reverse().join('')
}
// Method
increment(): void {
this.count++
}
// Lifecycle hook
mounted(): void {
console.log('Component mounted with prop:', this.propMessage)
console.log('Initial message:', this.message)
}
// Template rendered implicitly or via a render function
render(h: Function) {
return h('div', [
h('h2', this.message),
h('p', `Prop message: ${this.propMessage}`),
h('p', `Count: ${this.count}`),
h('p', `Reversed: ${this.reversedMessage}`),
h('button', { on: { click: this.increment } }, 'Increment')
])
}
}
// To use this component
// new Vue({
// el: '#app',
// render: h => h(MyComponent, { props: { propMessage: 'A prop value!' } })
// })
Debug
Known issues
breakingThe `mixins` helper type compatibility was temporarily broken, requiring specific type parameters which is not recommended. v7.2.5 and v7.2.6 fixed this to retain backward compatibility. Manually specifying mixin types like `mixins<Foo & Bar>(Foo, Bar)` is discouraged.fixUpgrade to v7.2.5 or later. Avoid manually specifying complex mixin types via generic parameters.
affects: 7.2.4
gotchaTypeScript IntelliSense support for lifecycle methods was disabled by default in v7.2.1 to prevent potential breakage of existing components. If you rely on this, you must explicitly import a side-effect module.fixAdd `import 'vue-class-component/hooks'` somewhere in your project's entry point (e.g., `main.ts`) to re-enable lifecycle IntelliSense.
affects: >=7.2.1
gotchaWhen using `vue-class-component` with Vue Router properties (like `$route`, `$router`) in property initializers (e.g., `data = this.$route.params.id`), it might lead to `undefined` errors because the router is not yet initialized. v7.2.4 addressed some cases.fixUpgrade to v7.2.4 or later. If still encountering issues, initialize such properties within `created()` or `mounted()` lifecycle hooks instead of directly in the property initializer.
affects: <7.2.4
gotchaVue Class Component v7.x is designed for Vue 2.x. While a v8 beta exists for Vue 3, attempting to use v7.x with Vue 3 will lead to incompatibility issues.fixEnsure you are using `vue-class-component` v7.x with Vue 2.x. For Vue 3, consider migrating to the Composition API or exploring the v8 beta branch, understanding that it's still in development.
affects: >=7.0.0 (when used with Vue 3)
Errors
Common errors & fixes
Cannot read property '$route' of undefined
Attempting to access Vue Router properties (e.g., this.$route, this.$router) in class property initializers before the component instance is fully set up.
fixMove the initialization logic for properties dependent on Vue Router to the `created()` or `mounted()` lifecycle hooks. Example: `data() { return { id: this.$route.params.id } }` or `created() { this.id = this.$route.params.id }`. Argument of type 'typeof Component' is not assignable to parameter of type 'VueConstructor<Vue>'
Incorrectly trying to instantiate a class-based component directly with `new Vue(MyComponent)` or expecting it to behave exactly like an Options API object where a `Vue.extend` might be missing.
fixClass components are typically used directly in Vue templates or within `render` functions, for example: `h(MyComponent)` or `components: { MyComponent }`. If manually creating an instance, it's usually `new MyComponent()`, but often it's handled by Vue's reactivity system. Property 'myMethod' does not exist on type 'CombinedVueInstance<Vue, ...>'. Did you mean 'myMethod'?
TypeScript IntelliSense for class component methods or properties is not working correctly, often due to missing type definitions or an issue with the project's TypeScript configuration.
fixEnsure `vue-class-component` is correctly installed, TypeScript is configured, and if you're expecting enhanced lifecycle hook IntelliSense, verify `import 'vue-class-component/hooks'` is included as per v7.2.1 changes.
Audit
Dependencies
vuerequiredRuntime dependency for Vue components.