javascript / expert
Snippet
Custom Renderers with @vue/runtime-core
The Custom Renderer API allows you to use Vue's reactivity system and component model in environments outside the standard DOM. By providing host-specific implementations for operations like 'insert' and 'createElement', you can build frameworks for WebGL, Terminal UIs, or even native mobile components while maintaining the Vue developer experience.
snippet.js
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
import { createRenderer } from '@vue/runtime-core';const { createApp } = createRenderer({patchProp(el, key, prevValue, nextValue) {// Custom logic for non-DOM environments (e.g., Canvas, PDF, Terminal)el.setAttribute(key, nextValue);},insert(child, parent, anchor) {parent.addChild(child, anchor);},createElement(type) {return new CustomElement(type);},// ... other host config methods});export function createCustomApp(root) {return createApp(root);}
vue
Breakdown
1
import { createRenderer } from '@vue/runtime-core';
Import the low-level engine that powers Vue's reconciliation logic.
2
patchProp(el, key, prevValue, nextValue) {
Defines how properties/attributes are updated on your custom element instances.
3
return new CustomElement(type);
Instantiates a non-DOM object representing a node in your custom tree.