Blog>
Snippets

Cloning a VNode with new properties

Provides an example of cloning an existing VNode and then adding or modifying its properties using the `cloneVNode` function.
// Import Vue and cloneVNode from a Vue-supported version (Vue 3)
import { createApp, cloneVNode } from 'vue';

// Assume there's a VNode you want to clone
let originalVNode = null; // placeholder for the original VNode

// Define new properties to add or override on the cloned VNode
const newProps = {
  class: 'new-class',
  style: {color: 'blue'},
  onClick: () => console.log('Clicked!')
};

// Use cloneVNode to create a clone with new properties merged in
let clonedVNode = cloneVNode(originalVNode, newProps);

// Mount the cloned VNode in an app (for demonstration purposes)
// Replace '#app' with the actual mount point
createApp({
  render: () => clonedVNode
}).mount('#app');
This example demonstrates how to clone a VNode and add/modify its properties using Vue 3's cloneVNode function. The `originalVNode` represents the VNode to clone, `newProps` includes the new properties to be added or modified, and `clonedVNode` is the result. `createApp` is used here for mounting the cloned VNode for demonstration.