Vue Academy · Lesson

onMounted and onBeforeMount

Accessing the DOM in onMounted, why onBeforeMount rarely needs direct use.

onMounted and onBeforeMount is a free Vue Academy lesson on CoddyKit — lesson 2 of 4. You can read the complete lesson below for free — then practise it hands-on in the browser with a built-in code editor and a 24/7 AI tutor. It is part of the Vue Academy learning path, one of 4 lessons in the course, and your progress syncs across the web and the CoddyKit app.

Hooks Around Mounting

The mounting phase has two hooks: onBeforeMount fires just before the DOM is created, and onMounted fires right after it is inserted. They look similar but serve very different needs.

onMounted: The DOM Is Ready

By the time onMounted runs, the component template has rendered and is in the page. Template refs point to real elements, so this is where DOM work belongs.

<script setup>
import { ref, onMounted } from 'vue'
const box = ref(null)
onMounted(() => {
  console.log(box.value.offsetWidth)
})
</script>

Use Case: Initializing a Chart

Libraries that draw into a DOM element need that element to exist first. Initialize them in onMounted, passing the ref element.

<script setup>
import { ref, onMounted } from 'vue'
const canvas = ref(null)
onMounted(() => {
  const ctx = canvas.value.getContext('2d')
  // draw chart with ctx
})
</script>

Use Case: DOM Measurements

Reading sizes, positions, or scroll offsets requires real DOM. onMounted is the earliest safe point to measure an element.

onMounted(() => {
  const rect = box.value.getBoundingClientRect()
  console.log(rect.height)
})

Use Case: Initial Data Fetch

Fetching data when the component appears is a classic onMounted job. Store the result in a ref so the template updates when it arrives.

<script setup>
import { ref, onMounted } from 'vue'
const posts = ref([])
onMounted(async () => {
  const res = await fetch('/api/posts')
  posts.value = await res.json()
})
</script>

onMounted Runs Once

onMounted fires a single time per component instance. If the component is unmounted and later re-created, the new instance runs its own onMounted.

onBeforeMount: Just Before Insertion

onBeforeMount runs after setup but before the DOM is created. Reactive state exists, but template refs are still null because nothing has rendered yet.

<script setup>
import { onBeforeMount } from 'vue'
onBeforeMount(() => {
  console.log('about to render')
})
</script>

Why onBeforeMount Is Rarely Needed

Most setup work can be done directly in <script setup> (which already runs before mount), and anything DOM-related must wait for onMounted. That leaves onBeforeMount with few practical uses.

A Common Mistake

Trying to access a template ref inside setup or onBeforeMount gives null. The element does not exist until mounting completes. Always move DOM access to onMounted.

<script setup>
import { ref } from 'vue'
const input = ref(null)
console.log(input.value) // null - too early!
</script>

Registering Multiple Hooks

You can call onMounted more than once; all callbacks run in order. This is why composables can each register their own onMounted independently.

onMounted(() => console.log('first'))
onMounted(() => console.log('second'))

Choosing Between Them

onMounted: DOM available — charts, measurements, focus, data fetch.
onBeforeMount: pre-render hook, no DOM, rarely needed.

Quick Check

Test your mounting hooks knowledge.

Recap

Mounting hooks summary:

onMounted runs after DOM insertion — use it for chart init, measurements, focus, and initial fetches.
It runs once per instance and can be registered multiple times.
onBeforeMount runs before render with no DOM access and is rarely needed.

Frequently asked questions

Is the “onMounted and onBeforeMount” lesson free?

Yes — the full text of “onMounted and onBeforeMount” is free to read here on the web, and the Vue Academy course includes 4 lessons in total. To practise it interactively (a built-in code editor and a 24/7 AI tutor) and unlock the rest of the Vue Academy course, upgrade to CoddyKit PRO.

What will I learn in “onMounted and onBeforeMount”?

Accessing the DOM in onMounted, why onBeforeMount rarely needs direct use. You practise Vue Academy with hands-on code you run directly in the browser, and a 24/7 AI tutor answers your questions as you work through the lesson.

Do I need any experience to start Vue Academy?

No prior experience is required. Vue Academy on CoddyKit is structured for beginners through advanced learners; this is — lesson 2 of 4, so you can start here or from the beginning and move at your own pace.

How long does the “onMounted and onBeforeMount” lesson take?

Most CoddyKit lessons take about 5–10 minutes. Each one is bite-sized and interactive, so you make steady progress and pick up exactly where you left off across the web and the app.

Can I write and run code in this Vue Academy lesson?

Yes. Every Vue Academy lesson includes a built-in code editor, so you write and run real code right in your browser and get instant AI feedback — no local setup required.

All lessons in this course

← Back to Vue Academy