onBeforeMount() Before Mount Hook
Last updated: 2026-10-22
onBeforeMount() Before Mount Hook
onBeforeMount() runs just before the component's first render — the template is compiled but no DOM exists yet.
| Group | Lifecycle Hooks |
|---|---|
| Kind | API |
| Scope | Component |
| Vue Version | 3.0+ |
| SSR Support | Yes |
📝 Syntax
onBeforeMount(() => {
// no DOM yet — good for data preparation
})⚙️ Arguments
| callback | Function executed before mount |
|---|
Returns：None
▶ Example
Edit the code below and see the live result:
Output：
Shows 'prepared before mount' — set before the first render.💡 Key Points
ℹ️ Note Rarely used directly — most setup logic at the top level is equivalent.
⚠️ Warning No DOM here: template refs are still null.
🏷️ Related Lifecycle Hooks
💡 Related Cases
More case studies coming soon.
📚 Related Tutorials
❓ FAQ
Q How is it different from top-level setup code?
A Nearly equivalent — it mainly mirrors the Options API hook.
Q Can I fetch data here?
A Yes, though setup or onMounted reads better; mind SSR timing.
Q How many times does it run?
A Once, before the first mount.
