@vue/runtime-core

What is @vue/runtime-core?

The @vue/runtime-core package is a part of the Vue.js framework that provides the core runtime components necessary for Vue applications to function. It includes the logic for the virtual DOM, components, reactivity system, and other essential features that enable developers to build interactive user interfaces.

What are @vue/runtime-core's main functionalities?

Reactivity System

The reactivity system allows developers to create reactive state objects that automatically update the DOM when the state changes.

{"import { reactive } from '@vue/runtime-core';\nconst state = reactive({ count: 0 });"}

Component Creation

This feature enables developers to define Vue components using the Composition API, which is a function-based approach to creating and managing component state and behavior.

{"import { defineComponent } from '@vue/runtime-core';\nconst MyComponent = defineComponent({\n  setup() {\n    // Component logic here\n  }\n});"}

Custom Renderer API

The Custom Renderer API allows developers to create custom renderers for Vue, enabling the use of Vue's reactivity and component system with different rendering backends, such as canvas or WebGL.

{"import { createRenderer } from '@vue/runtime-core';\nconst { render } = createRenderer({\n  patchProp,\n  ...otherOptions\n});"}

Other packages similar to @vue/runtime-core

react

React is a popular JavaScript library for building user interfaces. It also has a virtual DOM, component-based architecture, and its own reactivity system. React focuses on a declarative programming model and differs from Vue in syntax and the ecosystem of tools and extensions.

preact

Preact is a fast, 3kB alternative to React with the same modern API. It provides a similar component-based architecture and virtual DOM system but aims to be smaller and faster. Preact is often used for performance-critical applications or when a smaller bundle size is needed.

inferno

Inferno is another React-like library for building high-performance user interfaces. It is heavily optimized for performance and claims to be one of the fastest JavaScript UI libraries available. Inferno shares some similarities with Vue's reactivity and component system but is more focused on performance.

svelte

Svelte is a radical new approach to building user interfaces. Unlike Vue, which updates the DOM in response to state changes, Svelte compiles components to highly optimized imperative code that surgically updates the DOM. This results in faster runtime performance and smaller bundle sizes.

README

@vue/runtime-core

This package is published only for typing and building custom renderers. It is NOT meant to be used in applications.

For full exposed APIs, see src/index.ts.

Building a Custom Renderer

import { createRenderer } from '@vue/runtime-core'

const { render, createApp } = createRenderer({
  patchProp,
  insert,
  remove,
  createElement,
  // ...
})

// `render` is the low-level API
// `createApp` returns an app instance with configurable context shared
// by the entire app tree.
export { render, createApp }

export * from '@vue/runtime-core'

See @vue/runtime-dom for how a DOM-targeting renderer is implemented.

Changelog

3.5.0-beta.1 (2024-08-08)

Bug Fixes

• custom-element: delay mounting of custom elements with async parent (37ccb9b), closes #8127 #9341 #9351 #9351
• custom-element: delete prop on attribute removal (506c4c5), closes #11276
• custom-element: ignore scoped id (7f2c505)
• custom-element: reflect prop default value on custom element (63689ed), closes #9006 #10537
• custom-element: support early-set domProps for async custom elements (a07e7bf), closes #11081 #11082
• types/custome-element: defineCustomElement props inference with array emits (#11384) (e94b01b), closes #11353
• types: allow using InjectionKey as valid property key (321d807), closes #5089

Features

• custom-element: expose this.$host in Options API (1ef8f46)
• custom-element: inject child components styles to custom element shadow root (#11517) (56c76a8), closes #4662 #7941 #7942
• custom-element: support configurable app instance in defineCustomElement (6758c3c), closes #4356 #4635
• custom-element: support css :host selector by applying css vars on host element (#8830) (03a9ea2), closes #8826
• custom-element: support emit with options (e181bff), closes #7605
• custom-element: support for expose on customElement (#6256) (af838c1), closes #5540
• custom-element: support nonce option for injected style tags (bb4a02a), closes #6530
• custom-element: support passing custom-element-specific options via 2nd argument of defineCustomElement (60a88a2)
• custom-element: support shadowRoot: false in defineCustomElement() (37d2ce5), closes #4314 #4404
• custom-element: useHost() helper (775103a)
• custom-element: useShadowRoot() helper (5a1a89b), closes #6113 #8195
• hydration: allow fine tuning of lazy hydration strategy triggers (#11530) (261c8b1)
• reactivity/watch: add pause/resume for ReactiveEffect, EffectScope, and WatchHandle (#9651) (267093c)
• reactivity: store value cache on CustomRefs impls (#11539) (e044b6e)
• runtime-dom: Trusted Types compatibility (#10844) (6d4eb94)
• support specifying allowed keys via generic argument in useTemplateRef() (1fbfa69)
• types: allow computed getter and setter types to be unrelated (#11472) (a01675e), closes #7271
• types: export MultiWatchSources type (#9563) (998dca5)
• types: provide internal options for using refs type in language tools (#11492) (5ffd1a8)
• watch: support passing number to deep option to control the watch depth (#9572) (22f7d96)