Options API

E559082

The Options API is Vue.js’s original component syntax style that organizes component logic by option properties like data, methods, and computed rather than by logical feature groupings.

All labels observed (1)

Label Occurrences
Options API canonical 1

How this entity was disambiguated

Statements (49)

Predicate Object
instanceOf Vue.js API ⓘ
Vue.js component syntax style ⓘ
alsoKnownAs Options-based API ⓘ
backwardsCompatibility maintained for existing Vue 2 applications migrating to Vue 3 ⓘ
codeOrganizationPattern option-type-based organization ⓘ
comparedToCompositionAPI less flexible for advanced type inference ⓘ
configurationStyle object-based configuration ⓘ
contrastsWith Composition API ⓘ
defaultStyleFor many legacy Vue.js codebases ⓘ
definesComponentUsing export default object syntax ⓘ
designGoal simple mental model for component authors ⓘ
discourages grouping logic by feature within a single option block ⓘ
documentationStatus still documented in official Vue 3 docs ⓘ
encourages separation of concerns by option type ⓘ
exampleSyntax export default { data() { return { count: 0 } }, methods: { increment() { this.count++ } } } ⓘ
introducedIn Vue 2 ⓘ
linked to: Vue.js
learningCurve considered beginner-friendly ⓘ
limitations harder to reuse logic across components compared to Composition API ⓘ
logic for a single feature can be scattered across multiple options ⓘ
organizesLogicBy computed option ⓘ
data option ⓘ
lifecycle hook options ⓘ
methods option ⓘ
option properties ⓘ
watch option ⓘ
partOf Vue.js ⓘ
primaryUseCase small to medium-sized Vue components ⓘ
statusInVueEcosystem stable and not deprecated as of Vue 3 ⓘ
supportedIn Vue 2 ⓘ
linked to: Vue.js

Vue 3 ⓘ
linked to: Vue.js
supports TypeScript with class-component patterns via community libraries ⓘ
usedWith Single File Components (SFCs) ⓘ
global component registration in Vue 2 style ⓘ
usesProperty components ⓘ
computed ⓘ
data ⓘ
directives ⓘ
emits ⓘ
filters ⓘ
inject ⓘ
lifecycle hooks like created ⓘ
lifecycle hooks like mounted ⓘ
lifecycle hooks like unmounted ⓘ
lifecycle hooks like updated ⓘ
methods ⓘ
mixins ⓘ
props ⓘ
provide ⓘ
watch ⓘ

How these facts were elicited

Referenced by (1)

Full triples — surface form annotated when it differs from this entity's canonical label.

Composition API → contrastsWith → Options API ⓘ