mounted Mounted
Last updated: 2026-10-22
mounted Mounted
mounted runs after the component is rendered into the DOM — the standard place for template refs, third-party setup and measurements.
| Group | Options: Rendering & Lifecycle |
|---|---|
| Kind | Option |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
export default {
mounted() {
this.$refs.el.focus() // DOM ready
}
}⚙️ Arguments
| value | No arguments |
|---|
Returns：No return value
▶ Example
Edit the code below and see the live result:
Output：
Shows the paragraph's real width.💡 Key Points
💡 Tip Initialise libraries, autofocus and fetch data here.
ℹ️ Note Children mount before their parent.
⚠️ Warning Never runs under SSR, which conveniently protects DOM code.
🏷️ Related Rendering & Lifecycle
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q Typical split with created?
A created prepares data; mounted touches the DOM.
Q Does it run more than once?
A No — once after the initial mount.
Q Why wait for it to touch child refs?
A Children are mounted by then, so $refs resolves.
