OnMounted

OnMounted is a lifecycle hook in Vue.js used with the Composition API. It registers a callback that runs after a component has been mounted to the DOM and the initial render has completed. The hook is imported from the vue package and is invoked inside the component’s setup function.

The primary purpose of onMounted is to perform actions that require access to the DOM or to initialize libraries that depend on the element being present. Because it runs after the component is inserted into the document, it is a common place to measure elements, set up event listeners, or initiate third-party plugins that require a DOM node. If you need to run code after the DOM updates, you may combine onMounted with nextTick.

Usage is straightforward: within setup, call onMounted with a function containing the code to execute after mounting. For example, onMounted(() => { /* access DOM refs or start a feature */ }); It is client-side only; in server-side rendering, onMounted does not run.

Cleanup is not performed automatically by onMounted. To remove listeners or timers when the component is unmounted, use the onUnmounted hook. OnMounted is part of the Vue 3 Composition API lifecycle set, which also includes onBeforeMount, onUpdated, and onUnmounted. The Options API equivalent of onMounted is the mounted hook.