Blog>
Snippets

Creating a VNode manually in Vue.js 3

Shows how to manually create a VNode using the `h` function and render it in a Vue component.
// Import the 'h' function from Vue
import { h, createApp } from 'vue';

// Define a new Vue component
const MyComponent = {
  render() {
    // Use the 'h' function to create a VNode for a 'div' element with some text
    return h('div', 'Hello, this is a manually created VNode!');
  }
};

// Create a Vue application instance and mount the component
createApp(MyComponent).mount('#app');
This code snippet imports the 'h' function from Vue, defines a new component with a render function that returns a VNode representing a 'div' with text content, creates a Vue application instance, and mounts it to a DOM element with the id 'app'.