1---
2title: Access DOM Only After Mounted Hook
3impact: HIGH
4impactDescription: Accessing DOM elements before mounted causes undefined errors and silent failures
5type: capability
6tags: [vue3, vue2, lifecycle, dom, mounted, created, beforeMount, template-refs]
7---
8 
9# Access DOM Only After Mounted Hook
10 
11**Impact: HIGH** - Attempting to access DOM elements or `this.$el` in `created` or `beforeMount` hooks fails because the component's template has not yet been rendered to the DOM. This leads to undefined errors, null references, and failed third-party library initializations.
12 
13The component's DOM is only available starting from the `mounted` hook (Options API) or after `onMounted` runs (Composition API). Before this point, `this.$el` is undefined and template refs are null.
14 
15## Task Checklist
16 
17- [ ] Perform DOM manipulations only in `mounted`/`onMounted` or later
18- [ ] Initialize DOM-dependent libraries (charts, maps, editors) in mounted
19- [ ] Use `created` for data initialization and API calls (non-DOM operations)
20- [ ] Access template refs only after mounted
21- [ ] Use `$nextTick` if you need DOM after reactive data changes
22 
23**Incorrect:**
24```javascript
25// WRONG: Accessing DOM in created hook
26export default {
27  created() {
28    // DOM doesn't exist yet!
29    console.log(this.$el) // undefined
30    this.$el.querySelector('.chart') // Error: Cannot read property 'querySelector' of undefined
31 
32    // Third-party library initialization fails
33    new Chart(document.getElementById('myChart')) // Element doesn't exist yet
34  }
35}
36```
37 
38```javascript
39// WRONG: Accessing DOM in beforeMount
40export default {
41  beforeMount() {
42    // Still too early - template is compiled but not mounted
43    console.log(this.$el) // undefined in Vue 3
44    this.$refs.myInput.focus() // Error: Cannot read property 'focus' of undefined
45  }
46}
47```
48 
49```vue
50<!-- WRONG: Accessing template ref synchronously in setup -->
51<script setup>
52import { ref } from 'vue'
53 
54const myInput = ref(null)
55 
56// This runs during setup, before mounting
57myInput.value.focus() // Error: Cannot read property 'focus' of null
58</script>
59 
60<template>
61  <input ref="myInput" />
62</template>
63```
64 
65**Correct:**
66```javascript
67// CORRECT: Use created for data, mounted for DOM
68export default {
69  data() {
70    return { chartData: null }
71  },
72  async created() {
73    // Data fetching is fine in created
74    this.chartData = await fetchChartData()
75  },
76  mounted() {
77    // Now the DOM exists and is safe to access
78    console.log(this.$el) // <div>...</div>
79 
80    // Initialize DOM-dependent libraries
81    this.chart = new Chart(this.$refs.chartCanvas, {
82      data: this.chartData
83    })
84  }
85}
86```
87 
88```vue
89<!-- CORRECT: Access template refs in onMounted -->
90<script setup>
91import { ref, onMounted } from 'vue'
92 
93const myInput = ref(null)
94 
95onMounted(() => {
96  // DOM is now available
97  myInput.value.focus() // Works!
98})
99</script>
100 
101<template>
102  <input ref="myInput" />
103</template>
104```
105 
106```javascript
107// CORRECT: Using $nextTick for DOM access after data changes
108export default {
109  methods: {
110    async addItem() {
111      this.items.push(newItem)
112 
113      // Wait for Vue to update the DOM
114      await this.$nextTick()
115 
116      // Now the new element exists in DOM
117      this.$refs.list.lastElementChild.scrollIntoView()
118    }
119  }
120}
121```
122 
123## Vue 3 Composition API Pattern
124 
125```vue
126<script setup>
127import { ref, onMounted, nextTick } from 'vue'
128 
129const listRef = ref(null)
130const items = ref([])
131 
132onMounted(() => {
133  // Safe to access DOM here
134  listRef.value.style.height = '400px'
135})
136</script>
137```
138 
139## Vue 3.5+ useTemplateRef Pattern
140 
141```vue
142<script setup>
143import { useTemplateRef, onMounted } from 'vue'
144 
145// Vue 3.5+ recommended approach - decouples ref name from variable name
146const input = useTemplateRef('my-input')
147 
148onMounted(() => {
149  input.value.focus()
150})
151</script>
152 
153<template>
154  <input ref="my-input" />
155</template>
156```
157 
158## Composition API with nextTick
159 
160```vue
161<script setup>
162import { ref, nextTick } from 'vue'
163 
164const listRef = ref(null)
165const items = ref([])
166 
167async function addItem(item) {
168  items.value.push(item)
169 
170  // Wait for DOM update after reactive change
171  await nextTick()
172 
173  // Now new item is in DOM
174  listRef.value.lastElementChild.focus()
175}
176</script>
177 
178<template>
179  <ul ref="listRef">
180    <li v-for="item in items" :key="item.id">{{ item.name }}</li>
181  </ul>
182</template>
183```
184 
185## Common Third-Party Libraries
186 
187```javascript
188// CORRECT: Initialize in mounted
189export default {
190  mounted() {
191    // Chart.js
192    this.chart = new Chart(this.$refs.canvas, config)
193 
194    // Leaflet maps
195    this.map = L.map(this.$refs.mapContainer).setView([51.505, -0.09], 13)
196 
197    // Monaco Editor
198    this.editor = monaco.editor.create(this.$refs.editorContainer, options)
199 
200    // Video.js
201    this.player = videojs(this.$refs.videoElement)
202  },
203  beforeUnmount() {
204    // Don't forget cleanup!
205    this.chart?.destroy()
206    this.map?.remove()
207    this.editor?.dispose()
208    this.player?.dispose()
209  }
210}
211```
212 
213## Reference
214- [Vue.js Lifecycle Hooks](https://vuejs.org/guide/essentials/lifecycle.html)
215- [Vue.js Template Refs](https://vuejs.org/guide/essentials/template-refs.html)
216- [Vue.js nextTick](https://vuejs.org/api/general.html#nexttick)
217