Glossary
Glossary Class Component API

Class Component API

Also known as: vue-class-component, vue-property-decorator, class-style components
TechVue

Definition

The third, now-retired way to write a Vue component: as a TypeScript class with decorators — @Component, @Prop, @Watch from vue-class-component and vue-property-decorator — so that this.count was a class field and methods were class methods; the shape Vue 2 TypeScript projects and Vue CLI’s TypeScript preset produced between 2017 and 2020

It existed because Vue 2 had no good way to type the Options API, and a class did. Vue 3’s Composition API gave TypeScript a home without decorators, and the class proposal for Vue 3 was withdrawn; vue-class-component v8 exists for migration only. A codebase that says @Component at the top of its components is this, and its migration path is to <script setup>, one component at a time, usually with the class fields becoming refs and the decorated methods becoming plain functions.

Tech

A detour that made sense for three years. Recognize it in an inherited codebase, migrate it when a component is touched, and do not start anything new in it.

Related Terms

  • a: Appearance
  • ?: Keyboard shortcuts