Vue Class Component

Common errors

• Cannot read property '$route' of undefined

  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.
  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 }`.

• Argument of type 'typeof Component' is not assignable to parameter of type 'VueConstructor<Vue>'

  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.
  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.

• Property 'myMethod' does not exist on type 'CombinedVueInstance<Vue, ...>'. Did you mean 'myMethod'?

  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.
  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.

Warnings

• breaking 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.
  Fix: Upgrade to v7.2.5 or later. Avoid manually specifying complex mixin types via generic parameters.
• gotcha 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.
  Fix: Add `import 'vue-class-component/hooks'` somewhere in your project's entry point (e.g., `main.ts`) to re-enable lifecycle IntelliSense.
• gotcha 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.
  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.
• gotcha 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.
  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.

Install

• npm install vue-class-component npm
• yarn add vue-class-component yarn
• pnpm add vue-class-component pnpm

Imports

• Component
  wrong:

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

  correct:

  import Component from 'vue-class-component'

  Component is the default export. Do not use named import destructuring.
• mixins
  wrong:

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

  correct:

  import Component, { 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)
  wrong:

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

  correct:

  import 'vue-class-component/hooks'

  This is a side-effect import for enhancing TypeScript IntelliSense, introduced in v7.2.1 and disabled by default to prevent breakage.

Quickstart

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!' } })
// })