onMounted() Mounted Hook
Last updated: 2026-10-22
onMounted() Mounted Hook
onMounted() runs after the component and its children are in the DOM — the standard spot for template refs, third-party setup and requests.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onMounted(() => {
console.log(el.value.offsetWidth) // DOM is ready
})⚙️ Arguments
| callback | Function executed after mount |
|---|
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
Shows the paragraph's real pixel width.💡 Key Points
💡 Tip Initialise third-party libraries, measure the DOM and fire first requests here.
⚠️ Warning onMounted never runs on the server — keep DOM-dependent work here to avoid SSR errors.
ℹ️ Note A parent's onMounted fires after all children are mounted.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Why is the DOM available here but not in setup?
A setup runs before rendering; onMounted fires once rendering completes.
Q How is it different from onUpdated?
A onMounted runs once; onUpdated runs after every update.
Q Can the callback be async?
A The callback may be async, though registration must be synchronous.
