{"id":12419,"library":"vue-class-component","title":"Vue Class Component","description":"Vue Class Component provides ES201X/TypeScript class decorators that allow developers to write Vue components using a class-based syntax, leveraging features like decorators, inheritance, and strong typing. The current stable version, 7.2.6, is designed for Vue 2.x projects. While Vue 3 primarily uses the Composition API, this library offered a structured approach for large Vue 2 applications, particularly for those coming from object-oriented backgrounds or using TypeScript extensively. The project has moved towards a 'maintenance' state for the Vue 2 compatible version, with active development on a beta version (v8) targeting Vue 3. Release cadence for v7.x has been irregular, with bug fixes and minor improvements. Its key differentiator is simplifying component definition and lifecycle management with TypeScript classes, providing a more organized code structure compared to the Options API for complex components.","status":"maintenance","version":"7.2.6","language":"javascript","source_language":"en","source_url":"https://github.com/vuejs/vue-class-component","tags":["javascript","vue","class","babel","typescript"],"install":[{"cmd":"npm install vue-class-component","lang":"bash","label":"npm"},{"cmd":"yarn add vue-class-component","lang":"bash","label":"yarn"},{"cmd":"pnpm add vue-class-component","lang":"bash","label":"pnpm"}],"dependencies":[{"reason":"Runtime dependency for Vue components.","package":"vue","optional":false}],"imports":[{"note":"Component is the default export. Do not use named import destructuring.","wrong":"import { Component } from 'vue-class-component'","symbol":"Component","correct":"import Component from 'vue-class-component'"},{"note":"While mixins is a named export, Component (the default export) is typically imported alongside it. Note the recent compatibility fixes for mixins typing.","wrong":"import { mixins } from 'vue-class-component'","symbol":"mixins","correct":"import Component, { mixins } from 'vue-class-component'"},{"note":"This is a side-effect import for enhancing TypeScript IntelliSense, introduced in v7.2.1 and disabled by default to prevent breakage.","wrong":"import { hooks } from 'vue-class-component'","symbol":"hooks (for IntelliSense)","correct":"import 'vue-class-component/hooks'"}],"quickstart":{"code":"import Vue from 'vue'\nimport Component from 'vue-class-component'\n\ninterface MyData {\n  message: string\n  count: number\n}\n\n@Component({\n  props: {\n    propMessage: String\n  }\n})\nexport default class MyComponent extends Vue {\n  // Initial data\n  message: string = 'Hello from Vue Class Component!'\n  count: number = 0\n\n  // Declared props\n  readonly propMessage!: string\n\n  // Computed property\n  get reversedMessage(): string {\n    return this.message.split('').reverse().join('')\n  }\n\n  // Method\n  increment(): void {\n    this.count++\n  }\n\n  // Lifecycle hook\n  mounted(): void {\n    console.log('Component mounted with prop:', this.propMessage)\n    console.log('Initial message:', this.message)\n  }\n\n  // Template rendered implicitly or via a render function\n  render(h: Function) {\n    return h('div', [\n      h('h2', this.message),\n      h('p', `Prop message: ${this.propMessage}`),\n      h('p', `Count: ${this.count}`),\n      h('p', `Reversed: ${this.reversedMessage}`),\n      h('button', { on: { click: this.increment } }, 'Increment')\n    ])\n  }\n}\n\n// To use this component\n// new Vue({\n//   el: '#app',\n//   render: h => h(MyComponent, { props: { propMessage: 'A prop value!' } })\n// })","lang":"typescript","description":"Demonstrates a basic Vue 2 component using vue-class-component, including data, props, computed properties, methods, and a lifecycle hook."},"warnings":[{"fix":"Upgrade to v7.2.5 or later. Avoid manually specifying complex mixin types via generic parameters.","message":"The `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.","severity":"breaking","affected_versions":"7.2.4"},{"fix":"Add `import 'vue-class-component/hooks'` somewhere in your project's entry point (e.g., `main.ts`) to re-enable lifecycle IntelliSense.","message":"TypeScript 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.","severity":"gotcha","affected_versions":">=7.2.1"},{"fix":"Upgrade 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.","message":"When 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.","severity":"gotcha","affected_versions":"<7.2.4"},{"fix":"Ensure 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.","message":"Vue 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.","severity":"gotcha","affected_versions":">=7.0.0 (when used with Vue 3)"}],"env_vars":null,"last_verified":"2026-04-19T00:00:00.000Z","next_check":"2026-07-18T00:00:00.000Z","problems":[{"fix":"Move 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 }`.","cause":"Attempting to access Vue Router properties (e.g., this.$route, this.$router) in class property initializers before the component instance is fully set up.","error":"Cannot read property '$route' of undefined"},{"fix":"Class 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.","cause":"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.","error":"Argument of type 'typeof Component' is not assignable to parameter of type 'VueConstructor<Vue>'"},{"fix":"Ensure `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.","cause":"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.","error":"Property 'myMethod' does not exist on type 'CombinedVueInstance<Vue, ...>'. Did you mean 'myMethod'?"}],"ecosystem":"npm"}