How to use direct DOM in Vuejs 3?

March 13, 2022

I want to use DOM in a Vuejs 3 project. How can I do that? I want to select element like querySelector in Vuejs 3. I have tried but it’s not working well.

>Solution :

Vuejs uses virtual DOM, means a DOM specially made for vue. The virtual DOM is smaller in size than actual DOM, and it’s very efficient.

If you want to access a DOM element, vue has a solution, you can use Template Refs for that. ref is a special attribute, It allows us to obtain a direct reference to a specific DOM element or child component instance after it’s mounted.

According the official documentation, you can do something like this,

import { ref, onMounted } from 'vue'

// declare a ref to hold the element reference
// the name must match template ref value
const input = ref(null)

onMounted(() => {
  input.value.focus()
})
</script>

<template>
  <input ref="input" />
</template>

Furthermore, as vue is a JavaScript framework, you can use every funtionalities that JavaScript has, and as you have mentioned, your Vuejs 3 project should work with actual DOM functioinalities as well.