0
# Vue Runtime Core
1

2
Vue Runtime Core is the foundational runtime library of Vue.js 3, providing the core APIs for building custom renderers and managing reactive component systems. **This package is published only for typing and building custom renderers. It is NOT meant to be used in applications.** This package is designed for library authors and advanced users who need to create custom renderers or integrate Vue's reactivity system into other frameworks.
3

4
## Package Information
5

6
- **Package Name**: @vue/runtime-core
7
- **Package Type**: npm
8
- **Language**: TypeScript
9
- **Installation**: `npm install @vue/runtime-core`
10

11
## Core Imports
12

13
**For custom renderer development:**
14

15
```typescript
16
import { createRenderer, createHydrationRenderer } from "@vue/runtime-core";
17
```
18

19
**For accessing Vue's reactivity system:**
20

21
```typescript
22
import { 
23
  reactive, ref, computed, watch, 
24
  onMounted, onBeforeUnmount,
25
  defineComponent, h
26
} from "@vue/runtime-core";
27
```
28

29
For CommonJS:
30

31
```javascript
32
const { createRenderer, createHydrationRenderer } = require("@vue/runtime-core");
33
const { 
34
  reactive, ref, computed, watch,
35
  onMounted, onBeforeUnmount,
36
  defineComponent, h 
37
} = require("@vue/runtime-core");
38
```
39

40
## Basic Usage
41

42
**Creating a custom renderer (primary use case):**
43

44
```typescript
45
import { createRenderer } from "@vue/runtime-core";
46

47
// Create a custom renderer for your platform
48
const { render, createApp } = createRenderer({
49
  createElement(tag, namespace) {
50
    // Create your platform-specific element
51
    return document.createElement(tag);
52
  },
53
  insert(child, parent, anchor = null) {
54
    // Insert element into your platform
55
    parent.insertBefore(child, anchor);
56
  },
57
  remove(child) {
58
    // Remove element from your platform
59
    const parent = child.parentNode;
60
    if (parent) parent.removeChild(child);
61
  },
62
  patchProp(el, key, prevValue, nextValue, namespace, parentComponent) {
63
    // Handle property updates for your platform
64
    if (key.startsWith('on')) {
65
      el.addEventListener(key.slice(2).toLowerCase(), nextValue);
66
    } else {
67
      el.setAttribute(key, nextValue);
68
    }
69
  },
70
  createText(text) {
71
    return document.createTextNode(text);
72
  },
73
  createComment(text) {
74
    return document.createComment(text);
75
  },
76
  setText(node, text) {
77
    node.nodeValue = text;
78
  },
79
  setElementText(el, text) {
80
    el.textContent = text;
81
  },
82
  parentNode(node) {
83
    return node.parentNode;
84
  },
85
  nextSibling(node) {
86
    return node.nextSibling;
87
  }
88
});
89

90
// Use your custom renderer
91
const app = createApp({
92
  render() {
93
    return h("div", "Hello Custom Renderer!");
94
  }
95
});
96
```
97

98
**Using reactivity system independently:**
99

100
```typescript
101
import { reactive, ref, computed, watch } from "@vue/runtime-core";
102

103
// Create reactive state
104
const state = reactive({ count: 0 });
105
const count = ref(0);
106
const doubled = computed(() => count.value * 2);
107

108
// Watch for changes
109
watch(count, (newValue, oldValue) => {
110
  console.log(`Count changed from ${oldValue} to ${newValue}`);
111
});
112
```
113

114
## Architecture
115

116
Vue Runtime Core is built around several key systems:
117

118
- **Reactivity System**: Core reactive primitives (`reactive`, `ref`, `computed`) providing fine-grained reactivity
119
- **Component System**: Component definition, lifecycle management, and instance handling
120
- **Virtual DOM**: VNode creation, diffing, and patching for efficient DOM updates  
121
- **Render Pipeline**: Flexible renderer architecture supporting custom rendering targets
122
- **Composition API**: Modern component logic composition with lifecycle hooks and utilities
123
- **Effect System**: Dependency tracking and effect scheduling for reactive updates
124
- **Hydration System**: Server-side rendering support with client-side hydration
125

126
## Capabilities
127

128
### Reactivity System
129

130
Core reactive primitives for building reactive data structures and computed values. Provides fine-grained reactivity with automatic dependency tracking.
131

132
```typescript { .api }
133
function reactive<T extends object>(target: T): UnwrapNestedRefs<T>;
134
function ref<T>(value: T): Ref<UnwrapRef<T>>;
135
function ref<T = any>(): Ref<T | undefined>;
136
function shallowRef<T>(value: T): ShallowRef<T>;
137
function computed<T>(getter: ComputedGetter<T>): ComputedRef<T>;
138
function computed<T>(options: WritableComputedOptions<T>): WritableComputedRef<T>;
139
function readonly<T>(target: T): DeepReadonly<UnwrapNestedRefs<T>>;
140
function shallowReactive<T extends object>(target: T): ShallowReactive<T>;
141
function shallowReadonly<T extends object>(target: T): Readonly<T>;
142
function isRef(r: any): r is Ref;
143
function isReactive(value: unknown): boolean;
144
function isReadonly(value: unknown): boolean;
145
function isProxy(value: unknown): boolean;
146
function unref<T>(ref: T | Ref<T>): T;
147
function toRef<T extends object, K extends keyof T>(object: T, key: K): ToRef<T[K]>;
148
function toRef<T extends object, K extends keyof T>(object: T, key: K, defaultValue: T[K]): ToRef<Exclude<T[K], undefined>>;
149
function toRefs<T extends object>(object: T): ToRefs<T>;
150
function toValue<T>(val: T | Ref<T> | (() => T)): T;
151
function customRef<T>(factory: CustomRefFactory<T>): Ref<T>;
152
function triggerRef(ref: Ref): void;
153
function markRaw<T extends object>(value: T): Raw<T>;
154
function toRaw<T>(observed: T): T;
155
function proxyRefs<T extends object>(objectWithRefs: T): ShallowUnwrapRef<T>;
156
```
157

158
[Reactivity System](./reactivity.md)
159

160
### Component System
161

162
Component definition, lifecycle management, and composition API for building reactive components.
163

164
```typescript { .api }
165
function defineComponent<Props = {}, RawBindings = {}, D = {}, C extends ComputedOptions = {}, M extends MethodOptions = {}>(options: ComponentOptionsWithoutProps<Props, RawBindings, D, C, M>): DefineComponent<Props, RawBindings, D, C, M>;
166
function defineComponent<Props extends Readonly<ComponentPropsOptions>, RawBindings = {}, D = {}, C extends ComputedOptions = {}, M extends MethodOptions = {}>(options: ComponentOptionsWithArrayProps<Props, RawBindings, D, C, M>): DefineComponent<Props, RawBindings, D, C, M>;
167
function defineComponent<PropsOrPropOptions, RawBindings, D, C extends ComputedOptions, M extends MethodOptions, E extends EmitsOptions = {}, EE extends string = string, Props = Readonly<ExtractPropTypes<PropsOrPropOptions>>>(options: ComponentOptionsWithObjectProps<PropsOrPropOptions, RawBindings, D, C, M, E, EE>): DefineComponent<Props, RawBindings, D, C, M, E>;
168
function defineAsyncComponent<T extends Component = { new (): ComponentPublicInstance }>(source: AsyncComponentLoader<T> | AsyncComponentOptions<T>): T;
169
function getCurrentInstance(): ComponentInternalInstance | null;
170
```
171

172
[Component System](./components.md)
173

174
### Watch & Effects
175

176
Watch reactive data sources and create reactive effects with flexible scheduling options.
177

178
```typescript { .api }
179
function watch<T = any, Immediate extends Readonly<boolean> = false>(source: T | WatchSource<T>, cb: WatchCallback<T, Immediate extends true ? T | undefined : T>, options?: WatchOptions<Immediate>): WatchStopHandle;
180
function watch<T extends MultiWatchSources, Immediate extends Readonly<boolean> = false>(sources: [...T], cb: WatchCallback<MapSources<T, false>, MapSources<T, Immediate>>, options?: WatchOptions<Immediate>): WatchStopHandle;
181
function watchEffect(effect: WatchEffect, options?: WatchEffectOptions): WatchStopHandle;
182
function watchPostEffect(effect: WatchEffect, options?: WatchEffectOptions): WatchStopHandle;
183
function watchSyncEffect(effect: WatchEffect, options?: WatchEffectOptions): WatchStopHandle;
184
function effect(fn: () => void, options?: ReactiveEffectOptions): ReactiveEffectRunner;
185
function stop(runner: ReactiveEffectRunner): void;
186
function getCurrentWatcher(): ReactiveEffect | undefined;
187
function onWatcherCleanup(cleanupFn: () => void): void;
188
```
189

190
[Watch & Effects](./watch-effects.md)
191

192
### Lifecycle Hooks
193

194
Component lifecycle hooks for managing component mounting, updates, and cleanup.
195

196
```typescript { .api }
197
function onBeforeMount(hook: () => void): void;
198
function onMounted(hook: () => void): void;
199
function onBeforeUpdate(hook: () => void): void;
200
function onUpdated(hook: () => void): void;
201
function onBeforeUnmount(hook: () => void): void;
202
function onUnmounted(hook: () => void): void;
203
function onActivated(hook: () => void): void;
204
function onDeactivated(hook: () => void): void;
205
function onRenderTracked(hook: DebuggerHook): void;
206
function onRenderTriggered(hook: DebuggerHook): void;
207
function onErrorCaptured(hook: ErrorCapturedHook): void;
208
function onServerPrefetch(hook: () => Promise<any>): void;
209
```
210

211
[Lifecycle Hooks](./lifecycle.md)
212

213
### Dependency Injection
214

215
Provide and inject values across component hierarchies with type-safe injection keys.
216

217
```typescript { .api }
218
function provide<T>(key: InjectionKey<T> | string, value: T): void;
219
function inject<T>(key: InjectionKey<T> | string): T | undefined;
220
function hasInjectionContext(): boolean;
221
```
222

223
[Dependency Injection](./dependency-injection.md)
224

225
### Virtual DOM & Rendering
226

227
VNode creation, manipulation, and custom renderer creation for flexible rendering targets.
228

229
```typescript { .api }
230
function h(type: string | Component | typeof Text | typeof Comment | typeof Fragment | typeof Static, props?: VNodeProps | null, children?: VNodeNormalizedChildren): VNode;
231
function h(type: string | Component, props: null, children: VNodeNormalizedChildren): VNode;
232
function h(type: string | Component, children: VNodeNormalizedChildren): VNode;
233
function createVNode(type: VNodeTypes, props?: VNodeProps | null, children?: VNodeNormalizedChildren, patchFlag?: number, dynamicProps?: string[] | null, isBlockNode?: boolean): VNode;
234
function cloneVNode<T, U>(vnode: VNode<T, U>, extraProps?: Data & VNodeProps, mergeRef?: boolean, cloneTransition?: boolean): VNode<T, U>;
235
function mergeProps(...args: (Data & VNodeProps)[]): Data;
236
function isVNode(value: any): value is VNode;
237
function createRenderer<HostNode = RendererNode, HostElement = RendererElement>(options: RendererOptions<HostNode, HostElement>): Renderer<HostElement>;
238
function createHydrationRenderer(options: RendererOptions<Node, Element>): HydrationRenderer;
239
```
240

241
[Virtual DOM & Rendering](./vdom-rendering.md)
242

243
### Built-in Components
244

245
Core built-in components for advanced functionality like teleportation, suspense, and keep-alive caching.
246

247
```typescript { .api }
248
const Teleport: Component<TeleportProps>;
249
const Suspense: Component<SuspenseProps>;
250
const KeepAlive: Component<KeepAliveProps>;
251
const BaseTransition: Component<BaseTransitionProps>;
252
const Fragment: unique symbol;
253
const Text: unique symbol;
254
const Comment: unique symbol;
255
const Static: unique symbol;
256
```
257

258
[Built-in Components](./builtin-components.md)
259

260
### Composition Helpers
261

262
Helper utilities for composition API usage including template refs, models, and setup context.
263

264
```typescript { .api }
265
function useTemplateRef<T>(key: string): TemplateRef<T>;
266
function useModel<T>(props: T, name: string, options?: UseModelOptions): ModelRef<T>;
267
function useId(): string;
268
function useSlots(): Slots;
269
function useAttrs(): Data;
270
```
271

272
[Composition Helpers](./composition-helpers.md)
273

274
### Hydration Strategies
275

276
Advanced hydration strategies for selective server-side rendering and client-side hydration.
277

278
```typescript { .api }
279
function hydrateOnIdle(timeout?: number): HydrationStrategy;
280
function hydrateOnVisible(options?: IntersectionObserverInit): HydrationStrategy;
281
function hydrateOnMediaQuery(query: string): HydrationStrategy;
282
function hydrateOnInteraction(events: string | string[]): HydrationStrategy;
283
```
284

285
[Hydration Strategies](./hydration.md)
286

287
### Scheduler & Timing
288

289
Control timing of updates and DOM operations with precise scheduling utilities.
290

291
```typescript { .api }
292
function nextTick(fn?: () => void): Promise<void>;
293
function queuePostFlushCb(cb: SchedulerJob): void;
294
```
295

296
[Scheduler & Timing](./scheduler-timing.md)
297

298
### Asset Resolution
299

300
Dynamically resolve components and directives at runtime for flexible component systems.
301

302
```typescript { .api }
303
function resolveComponent(name: string): ConcreteComponent | string;
304
function resolveDirective(name: string): Directive | undefined;
305
function resolveDynamicComponent(component: unknown): VNodeTypes;
306
```
307

308
[Asset Resolution](./asset-resolution.md)
309

310
### Error Handling
311

312
Robust error handling utilities for graceful error management and reporting.
313

314
```typescript { .api }
315
function handleError(err: unknown, instance: ComponentInternalInstance | null, type: ErrorTypes, suspenseBoundary?: SuspenseBoundary | null): void;
316
function callWithErrorHandling<T extends any[], R>(fn: (...args: T) => R, instance: ComponentInternalInstance | null, type: ErrorTypes, args?: T): R | undefined;
317
function callWithAsyncErrorHandling<T extends any[], R>(fn: ((...args: T) => R) | ((...args: T) => R)[], instance: ComponentInternalInstance | null, type: ErrorTypes, args?: T): Promise<R[]>;
318
const ErrorCodes: {
319
  SETUP_FUNCTION: 0,
320
  RENDER_FUNCTION: 1,
321
  NATIVE_EVENT_HANDLER: 5,
322
  COMPONENT_EVENT_HANDLER: 6,
323
  VNODE_HOOK: 7,
324
  DIRECTIVE_HOOK: 8,
325
  TRANSITION_HOOK: 9,
326
  APP_ERROR_HANDLER: 10,
327
  APP_WARN_HANDLER: 11,
328
  FUNCTION_REF: 12,
329
  ASYNC_COMPONENT_LOADER: 13,
330
  SCHEDULER: 14,
331
  WATCH_CALLBACK: 15,
332
  WATCH_GETTER: 16,
333
  WATCH_CLEANUP: 17
334
};
335
const ErrorTypeStrings: Record<number | string, string>;
336
```
337

338
[Error Handling](./error-handling.md)
339

340
### SSR Context
341

342
Server-side rendering context management for universal applications.
343

344
```typescript { .api }
345
function useSSRContext<T>(): T | undefined;
346
const ssrContextKey: InjectionKey<Record<string, any>>;
347
```
348

349
[SSR Context](./ssr-context.md)
350

351
### Script Setup APIs
352

353
Compile-time macros for `<script setup>` syntax, used for typing and warnings during development.
354

355
```typescript { .api }
356
function defineProps<T>(): T;
357
function defineEmits<T>(): T;
358
function defineExpose<T>(exposed: T): void;
359
function defineOptions(options: ComponentOptions): void;
360
function defineSlots<T>(): T;
361
function defineModel<T>(name?: string, options?: ModelOptions): ModelRef<T>;
362
function withDefaults<T>(props: T, defaults: Partial<T>): T;
363
```
364

365
### Development & DevTools
366

367
Development utilities and devtools integration for debugging and development workflow.
368

369
```typescript { .api }
370
const version: string;
371
const devtools: DevtoolsHook | undefined;
372
function setDevtoolsHook(hook: DevtoolsHook): void;
373
function warn(msg: string, ...args: any[]): void;
374
function assertNumber(val: unknown, type: string): void;
375
```
376

377
### Utility Functions
378

379
Re-exported utility functions from `@vue/shared` for common transformations and normalizations.
380

381
```typescript { .api }
382
function toDisplayString(val: unknown): string;
383
function camelize(str: string): string;
384
function capitalize(str: string): string;
385
function toHandlerKey(str: string): string;
386
function normalizeProps(props: Record<string, any> | null): Record<string, any> | null;
387
function normalizeClass(value: unknown): string;
388
function normalizeStyle(value: unknown): NormalizedStyle | null;
389
```
390

391
### Advanced Composition Helpers
392

393
Advanced helper utilities for complex composition API scenarios and internal framework usage.
394

395
```typescript { .api }
396
function mergeDefaults<T>(props: T, defaults: Partial<T>): T;
397
function mergeModels<T>(props: T, models: Record<string, any>): T;
398
function createPropsRestProxy<T>(props: T, keys: string[]): T;
399
function withAsyncContext<T>(getAwaitable: () => Promise<T>): Promise<T>;
400
```
401

402
### Internal Render Helpers
403

404
Low-level rendering utilities for advanced scenarios and custom renderer implementations.
405

406
```typescript { .api }
407
function renderList<T>(source: T[], renderItem: (value: T, key: string | number, index: number) => VNode): VNode[];
408
function renderSlot(slots: Slots, name: string, props?: Data, fallback?: () => VNodeArrayChildren): VNode;
409
function withMemo<T>(memo: any[], render: () => T, cache: any[], index: number): T;
410
function isMemoSame(cached: any[], memo: any[]): boolean;
411
function openBlock(disableTracking?: boolean): void;
412
function createBlock(type: VNodeTypes, props?: VNodeProps, children?: VNodeArrayChildren): VNode;
413
function setBlockTracking(value: number): void;
414
function createTextVNode(text?: string, flag?: number): VNode;
415
function createCommentVNode(text?: string, asBlock?: boolean): VNode;
416
function createStaticVNode(content: string, numberOfNodes: number): VNode;
417
function createElementVNode(type: string, props?: VNodeProps, children?: VNodeArrayChildren): VNode;
418
function createElementBlock(type: string, props?: VNodeProps, children?: VNodeArrayChildren): VNode;
419
function guardReactiveProps(props: VNodeProps | null): VNodeProps | null;
420
function createSlots(slots: Record<string, Slot>, dynamicSlots?: (ComputedRef<string> | string | ComputedRef<string[]> | string[])[]): Slots;
421
function toHandlers(obj: Record<string, any>): Record<string, any>;
422
function withCtx(fn: Function, ctx?: ComponentInternalInstance | null): Function;
423
function pushScopeId(id: string | null): void;
424
function popScopeId(): void;
425
function withScopeId<T>(id: string | null, fn: () => T): T;
426
function transformVNodeArgs(transformer?: (args: any[], instance?: ComponentInternalInstance | null) => any[]): void;
427
```
428

429
[Internal Render Helpers](./internal-render-helpers.md)
430

431
## Core Types
432

433
```typescript { .api }
434
interface Ref<T> {
435
  value: T;
436
}
437

438
interface ComputedRef<T> extends Ref<T> {
439
  readonly value: T;
440
}
441

442
interface WatchOptions {
443
  immediate?: boolean;
444
  deep?: boolean;
445
  flush?: 'pre' | 'post' | 'sync';
446
}
447

448
interface InjectionKey<T> extends Symbol {}
449

450
interface VNode {
451
  type: VNodeTypes;
452
  props: VNodeProps | null;
453
  children: VNodeNormalizedChildren;
454
  key: string | number | symbol | null;
455
}
456

457
interface ComponentInternalInstance {
458
  uid: number;
459
  vnode: VNode;
460
  parent: ComponentInternalInstance | null;
461
  setupState: Data;
462
  ctx: ComponentPublicInstance;
463
}
464

465
interface RendererOptions<HostNode = any, HostElement = any> {
466
  createElement(type: string, namespace?: ElementNamespace): HostElement;
467
  insert(child: HostNode, parent: HostElement, anchor?: HostNode | null): void;
468
  remove(child: HostNode): void;
469
  patchProp(el: HostElement, key: string, prevValue: any, nextValue: any, namespace?: ElementNamespace, parentComponent?: ComponentInternalInstance | null): void;
470
  createText(text: string): HostNode;
471
  createComment(text: string): HostNode;
472
  setText(node: HostNode, text: string): void;
473
  setElementText(node: HostElement, text: string): void;
474
  parentNode(node: HostNode): HostElement | null;
475
  nextSibling(node: HostNode): HostNode | null;
476
  querySelector?(selector: string): HostElement | null;
477
  setScopeId?(el: HostElement, id: string): void;
478
  cloneNode?(node: HostNode): HostNode;
479
  insertStaticContent?(content: string, parent: HostElement, anchor: HostNode | null, namespace: ElementNamespace): [HostNode, HostNode];
480
}
481

482
interface Renderer<HostElement = RendererElement> {
483
  render: RootRenderFunction<HostElement>;
484
  createApp: CreateAppFunction<HostElement>;
485
}
486

487
interface HydrationRenderer extends Renderer<Element | ShadowRoot> {
488
  hydrate: RootHydrateFunction;
489
}
490

491
interface ModelRef<T> extends Ref<T> {
492
  readonly value: T;
493
}
494

495
interface ModelOptions {
496
  get?: (v: any) => any;
497
  set?: (v: any) => any;
498
}
499

500
interface TemplateRef<T = any> extends Ref<T | null> {}
501

502
interface WatchHandle {
503
  (): void;
504
  pause(): void;
505
  resume(): void;
506
  stop(): void;
507
}
508

509
interface WatchStopHandle {
510
  (): void;
511
}
512

513
interface ErrorTypes {
514
  SETUP_FUNCTION: 'setup function';
515
  RENDER_FUNCTION: 'render function';
516
  NATIVE_EVENT_HANDLER: 'native event handler';
517
  COMPONENT_EVENT_HANDLER: 'component event handler';
518
  VNODE_HOOK: 'vnode hook';
519
  DIRECTIVE_HOOK: 'directive hook';
520
  TRANSITION_HOOK: 'transition hook';
521
  APP_ERROR_HANDLER: 'app errorHandler';
522
  APP_WARN_HANDLER: 'app warnHandler';
523
  FUNCTION_REF: 'ref function';
524
  ASYNC_COMPONENT_LOADER: 'async component loader';
525
  SCHEDULER: 'scheduler flush';
526
  WATCH_CALLBACK: 'watcher callback';
527
  WATCH_GETTER: 'watcher getter';
528
  WATCH_CLEANUP: 'watcher cleanup';
529
}
530

531
interface DevtoolsHook {
532
  enabled?: boolean;
533
  emit: (event: string, ...args: any[]) => void;
534
  on: (event: string, handler: Function) => void;
535
  once: (event: string, handler: Function) => void;
536
  off: (event: string, handler: Function) => void;
537
  appRecord: any;
538
  apps: any[];
539
}
540

541
type ElementNamespace = 'svg' | 'mathml' | undefined;
542
type VNodeTypes = string | VNode | Component | typeof Text | typeof Static | typeof Comment | typeof Fragment | typeof Teleport | typeof TeleportImpl | typeof Suspense | typeof KeepAlive;
543
type VNodeArrayChildren = Array<VNodeArrayChildren | VNodeChildAtom>;
544
type VNodeChildAtom = VNode | string | number | boolean | null | undefined | void;
545
type VNodeChild = VNodeChildAtom | VNodeArrayChildren;
546
type VNodeNormalizedChildren = string | VNodeArrayChildren | RawSlots | null;
547
type VNodeProps = Record<string, any> & {
548
  key?: string | number | symbol;
549
  ref?: VNodeRef;
550
  ref_for?: boolean;
551
  ref_key?: string;
552
};
553
type VNodeRef = string | Ref | ((ref: Element | ComponentPublicInstance | null, refs: Record<string, any>) => void);
554
type RawSlots = {
555
  [name: string]: unknown;
556
  $stable?: boolean;
557
};
558
type NormalizedStyle = Record<string, string | number>;
559
type Data = Record<string, unknown>;
560
type Slots = Readonly<InternalSlots>;
561
type InternalSlots = {
562
  [name: string]: Slot | undefined;
563
};
564

565
interface Slot<T extends any[] = any[]> {
566
  (...args: T): VNode[];
567
  _c?: boolean;
568
  _ctx?: ComponentInternalInstance | null;
569
  _d?: boolean;
570
  _s?: boolean;
571
}
572

573
interface ComponentPublicInstance {
574
  $: ComponentInternalInstance;
575
  $data: Data;
576
  $props: Data;
577
  $attrs: Data;
578
  $refs: Data;
579
  $slots: Slots;
580
  $root: ComponentPublicInstance | null;
581
  $parent: ComponentPublicInstance | null;
582
  $emit: EmitFn;
583
  $el: any;
584
  $options: ComponentOptionsBase<any, any, any, any, any, any, any, any, any>;
585
  $forceUpdate: () => void;
586
  $nextTick: typeof nextTick;
587
  $watch<T = any>(source: string | WatchSource<T>, cb: WatchCallback<T>, options?: WatchOptions): WatchStopHandle;
588
}
589

590
type ComponentOptionsBase<
591
  V,
592
  D,
593
  C,
594
  M,
595
  E,
596
  EE = EmitsOptions,
597
  I = {},
598
  II = {},
599
  S = {}
600
> = {
601
  setup?: (this: void, props: Readonly<P>, ctx: SetupContext<EE>) => Promise<RawBindings> | RawBindings | RenderFunction | void;
602
  name?: string;
603
  template?: string | object;
604
  render?: Function;
605
  components?: Record<string, Component>;
606
  directives?: Record<string, Directive>;
607
  inheritAttrs?: boolean;
608
  emits?: EE;
609
  expose?: string[];
610
  serverPrefetch?(): void | Promise<any>;
611
} & ComponentCustomOptions &
612
  ComponentOptionsData<D> &
613
  ComponentOptionsProps<P> &
614
  ComponentOptionsComputed<C> &
615
  ComponentOptionsMethods<M> &
616
  ComponentOptionsWatch<V> &
617
  ComponentProvideOptions;
618

619
type SetupContext<E = EmitsOptions> = E extends any ? {
620
  attrs: Data;
621
  slots: Slots;
622
  emit: EmitFn<E>;
623
  expose: (exposed?: Record<string, any>) => void;
624
} : never;
625

626
type EmitFn<Options = ObjectEmitsOptions> = Options extends Array<infer V>
627
  ? (event: V, ...args: any[]) => void
628
  : Options extends ObjectEmitsOptions
629
  ? <T extends keyof Options>(event: T, ...args: Parameters<Options[T]>) => void
630
  : (event: string, ...args: any[]) => void;
631

632
type RawBindings = Record<string, any>;
633
type RenderFunction = () => VNode | VNode[];
634
type Component<Props = any, RawBindings = any, D = any, C extends ComputedOptions = ComputedOptions, M extends MethodOptions = MethodOptions> = ConcreteComponent<Props, RawBindings, D, C, M> | ComponentPublicInstanceConstructor<Props>;
635

636
interface ConcreteComponent<
637
  Props = {},
638
  RawBindings = any,
639
  D = any,
640
  C extends ComputedOptions = ComputedOptions,
641
  M extends MethodOptions = MethodOptions
642
> {
643
  __vccOpts?: ComponentOptions<any, any, any, Props, RawBindings, D, C, M>;
644
  new (...args: any[]): ComponentPublicInstance<Props, RawBindings, D, C, M>;
645
  __isFragment?: never;
646
  __isTeleport?: never;
647
  __isSuspense?: never;
648
}
649

650
type MethodOptions = Record<string, Function>;
651
type ComputedOptions = Record<string, ComputedGetter<any> | WritableComputedOptions<any>>;
652
type ComponentPublicInstanceConstructor<T = {}> = { new (...args: any[]): ComponentPublicInstance<T> };
653
type ComponentOptions<
654
  V = any,
655
  D = any,
656
  C extends ComputedOptions = any,
657
  M extends MethodOptions = any,
658
  E extends EmitsOptions = any,
659
  Props = any,
660
  RawBindings = any,
661
  Defaults = any,
662
  I extends ComponentInjectOptions = any,
663
  II extends string = string,
664
  S extends SlotsType = any
665
> = ComponentOptionsBase<V, D, C, M, E, Props, RawBindings, Defaults, I, II, S> & {
666
  call?: (this: unknown, ...args: unknown[]) => never;
667
} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M, E>>;
668

669
type EmitsOptions = ObjectEmitsOptions | string[];
670
type ObjectEmitsOptions = Record<string, ((...args: any[]) => any) | null>;
671
type SlotsType<T = Record<string, any>> = T | (new () => T);
672
type ComponentInjectOptions = string[] | ObjectInjectOptions;
673
type ObjectInjectOptions = Record<string | symbol, string | symbol | { from?: string | symbol; default?: unknown }>;
674
type ComponentProvideOptions = ObjectProvideOptions | Function;
675
type ObjectProvideOptions = Record<string | symbol, unknown>;
676
type ComponentCustomOptions = Record<string, any>;
677
type ComponentOptionsMixin = ComponentOptionsBase<any, any, any, any, any, any, any, any, any>;
678

679
interface ComponentOptionsData<D> {
680
  data?: (this: ComponentPublicInstance, vm: ComponentPublicInstance) => D;
681
}
682

683
interface ComponentOptionsProps<P> {
684
  props?: ComponentPropsOptions<P>;
685
}
686

687
interface ComponentOptionsComputed<C> {
688
  computed?: C;
689
}
690

691
interface ComponentOptionsMethods<M> {
692
  methods?: M;
693
}
694

695
interface ComponentOptionsWatch<V> {
696
  watch?: ComponentWatchOptions<V>;
697
}
698

699
type ComponentPropsOptions<P = Data> = ComponentObjectPropsOptions<P> | string[];
700
type ComponentObjectPropsOptions<P = Data> = {
701
  [K in keyof P]: Prop<P[K]> | null;
702
};
703

704
interface Prop<T, D = T> {
705
  type?: PropType<T> | true | null;
706
  required?: boolean;
707
  default?: D | DefaultFactory<D> | null | undefined | object;
708
  validator?(value: unknown): boolean;
709
}
710

711
type PropType<T> = PropConstructor<T> | PropConstructor<T>[];
712
type PropConstructor<T = any> = { new (...args: any[]): T & {} } | { (): T } | PropMethod<T>;
713
type PropMethod<T, TConstructor = any> = [T] extends [
714
  ((...args: any) => any) | undefined
715
] ? { new (): TConstructor; (): T; readonly prototype: TConstructor } : never;
716
type DefaultFactory<T> = (props: Data) => T | null | undefined;
717
type ComponentWatchOptions<V = any> = Record<string, ComponentWatchOptionItem<V>>;
718
type ComponentWatchOptionItem<V = any> = string | WatchCallback<V> | ObjectWatchOptionItem<V>;
719
interface ObjectWatchOptionItem<V = any> extends WatchOptions {
720
  handler: WatchCallback<V> | string;
721
}
722

723
type HydrationStrategy = (hydrate: () => void, forEachElement?: (cb: (el: Element) => void) => void) => () => void;
724
type HydrationStrategyFactory = () => HydrationStrategy;
725

726
// Additional missing types
727
type RendererNode = any;
728
type RendererElement = any;
729
type WatchSource<T = any> = Ref<T> | ComputedRef<T> | (() => T);
730
type MultiWatchSources = (WatchSource<unknown> | object)[];
731
type MapSources<T, Immediate> = {
732
  [K in keyof T]: T[K] extends WatchSource<infer V>
733
    ? Immediate extends true
734
      ? V | undefined
735
      : V
736
    : T[K] extends object
737
    ? Immediate extends true
738
      ? T[K] | undefined
739
      : T[K]
740
    : never;
741
};
742
type WatchCallback<V = any, OV = any> = (value: V, oldValue: OV, onCleanup: OnCleanup) => any;
743
type WatchEffect = (onCleanup: OnCleanup) => void;
744
type OnCleanup = (cleanupFn: () => void) => void;
745
interface WatchEffectOptions extends DebuggerOptions {
746
  flush?: 'pre' | 'post' | 'sync';
747
}
748
interface ReactiveEffectOptions extends DebuggerOptions {
749
  lazy?: boolean;
750
  scheduler?: EffectScheduler;
751
  scope?: EffectScope;
752
  allowRecurse?: boolean;
753
  onStop?: () => void;
754
}
755
type ReactiveEffectRunner<T = any> = {
756
  (): T;
757
  effect: ReactiveEffect;
758
};
759
type EffectScheduler = (...args: any[]) => any;
760
type DebuggerHook = (e: DebuggerEvent) => void;
761
type ErrorCapturedHook<TError = unknown> = (err: TError, instance: ComponentPublicInstance | null, info: string) => boolean | void;
762
interface DebuggerEvent {
763
  effect: ReactiveEffect;
764
  target: object;
765
  type: TrackOpTypes | TriggerOpTypes;
766
  key: any;
767
  newValue?: any;
768
  oldValue?: any;
769
  oldTarget?: Map<any, any> | Set<any>;
770
}
771
enum TrackOpTypes {
772
  GET = 'get',
773
  HAS = 'has',
774
  ITERATE = 'iterate'
775
}
776
enum TriggerOpTypes {
777
  SET = 'set',
778
  ADD = 'add',
779
  DELETE = 'delete',
780
  CLEAR = 'clear'
781
}
782
type WritableComputedOptions<T> = {
783
  get: ComputedGetter<T>;
784
  set: ComputedSetter<T>;
785
};
786
type ComputedGetter<T> = (...args: any[]) => T;
787
type ComputedSetter<T> = (v: T) => void;
788
type CustomRefFactory<T> = (track: () => void, trigger: () => void) => {
789
  get: () => T;
790
  set: (value: T) => void;
791
};
792
type ExtractPropTypes<O> = {
793
  [K in keyof Pick<O, RequiredKeys<O>>]: InferPropType<O[K]>;
794
} & {
795
  [K in keyof Pick<O, OptionalKeys<O>>]?: InferPropType<O[K]>;
796
};
797
type RequiredKeys<T> = {
798
  [K in keyof T]: T[K] extends { required: true } | { default: any } | BooleanConstructor | { type: BooleanConstructor }
799
    ? T[K] extends { required: false }
800
      ? never
801
      : K
802
    : never;
803
}[keyof T];
804
type OptionalKeys<T> = Exclude<keyof T, RequiredKeys<T>>;
805
type InferPropType<T> = [T] extends [null]
806
  ? any // null & true would fail to infer
807
  : [T] extends [{ type: null | true }]
808
  ? any // As TS issue https://github.com/Microsoft/TypeScript/issues/14829 // somehow `ObjectConstructor` when inferred from { (): T } becomes `any` // `BooleanConstructor` when inferred from PropConstructor(with PropMethod) becomes `Boolean`
809
  : [T] extends [ObjectConstructor | { type: ObjectConstructor }]
810
  ? Record<string, any>
811
  : [T] extends [BooleanConstructor | { type: BooleanConstructor }]
812
  ? boolean
813
  : [T] extends [DateConstructor | { type: DateConstructor }]
814
  ? Date
815
  : [T] extends [(infer U)[] | { type: (infer U)[] }]
816
  ? U extends DateConstructor
817
    ? Date | InferPropType<U>
818
    : InferPropType<U>
819
  : [T] extends [Prop<infer V, infer D>]
820
  ? unknown extends V
821
    ? IfAny<V, V, D>
822
    : V
823
  : T;
824
type IfAny<T, Y, N> = 0 extends 1 & T ? Y : N;
825
type ComponentOptionsWithoutProps<
826
  Props = {},
827
  RawBindings = {},
828
  D = {},
829
  C extends ComputedOptions = {},
830
  M extends MethodOptions = {}
831
> = ComponentOptions<any, D, C, M, any, Props, RawBindings> & {
832
  props?: undefined;
833
} & ThisType<ComponentPublicInstance<Props, RawBindings, D, C, M>>;
834
type ComponentOptionsWithArrayProps<
835
  PropNames extends string = string,
836
  RawBindings = {},
837
  D = {},
838
  C extends ComputedOptions = {},
839
  M extends MethodOptions = {}
840
> = ComponentOptions<any, D, C, M, any, Readonly<{ [key in PropNames]?: any }>, RawBindings> & {
841
  props: PropNames[];
842
} & ThisType<ComponentPublicInstance<Readonly<{ [key in PropNames]?: any }>, RawBindings, D, C, M>>;
843
type ComponentOptionsWithObjectProps<
844
  PropsOptions = ComponentObjectPropsOptions,
845
  RawBindings = {},
846
  D = {},
847
  C extends ComputedOptions = {},
848
  M extends MethodOptions = {},
849
  E extends EmitsOptions = {},
850
  EE extends string = string
851
> = ComponentOptions<any, D, C, M, E, Readonly<ExtractPropTypes<PropsOptions>>, RawBindings, any, any, EE> & {
852
  props: PropsOptions;
853
} & ThisType<ComponentPublicInstance<Readonly<ExtractPropTypes<PropsOptions>>, RawBindings, D, C, M, E>>;
854
```