I am working on a vue.js 3 project, where I need to refer/get a div element in my script by initially declaring a null reference like this const refRouterView = ref(null) and I am not sure how to make TypeScript aware of DomElement.

Markup updated

<template lang="pug">
.flex
  router-view(ref='refRouterView')
     ...
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const refRouterView = ref(null);
const routerViewHeight = ref(500);

const getRouterViewHeight = () => {
  setTimeout(() => {
    routerViewHeight.value = refRouterView.value?.$el.offsetHeight;
  }, 250);
};

onMounted(() => getRouterViewHeight());
</script>

I was getting this error Object is possibly 'null' before adding ? to refRouterView.value? which seems like hack and I don't like it. And, after adding ? I started seeing this error Property '$el' does not exist on type 'never'.

I tried adding HTMLElement to const refRouterView : HTMLElement = ref(null); but that introduce this error Property 'value' does not exist on type 'HTMLElement'. which was not solved even after adding ? to refRouterView.value?

Please help!

More Info

Originally my question was using div(ref='refRouterView') and @Thomas's answer solves it but I was using router-view. Just for making my question easy to understanding I mentioned div instead of router-view and that confused us, hence the answer did not solve my issue.

<template lang="pug">
  .flex
    div(ref='refRouterView')
      ...
</template>

I am working on a vue.js 3 project, where I need to refer/get a div element in my script by initially declaring a null reference like this const refRouterView = ref(null) and I am not sure how to make TypeScript aware of DomElement.

Markup updated

<template lang="pug">
.flex
  router-view(ref='refRouterView')
     ...
</template>

<script lang="ts" setup>
import { ref, onMounted } from 'vue';

const refRouterView = ref(null);
const routerViewHeight = ref(500);

const getRouterViewHeight = () => {
  setTimeout(() => {
    routerViewHeight.value = refRouterView.value?.$el.offsetHeight;
  }, 250);
};

onMounted(() => getRouterViewHeight());
</script>

I was getting this error Object is possibly 'null' before adding ? to refRouterView.value? which seems like hack and I don't like it. And, after adding ? I started seeing this error Property '$el' does not exist on type 'never'.

I tried adding HTMLElement to const refRouterView : HTMLElement = ref(null); but that introduce this error Property 'value' does not exist on type 'HTMLElement'. which was not solved even after adding ? to refRouterView.value?

Please help!

More Info

Originally my question was using div(ref='refRouterView') and @Thomas's answer solves it but I was using router-view. Just for making my question easy to understanding I mentioned div instead of router-view and that confused us, hence the answer did not solve my issue.

<template lang="pug">
  .flex
    div(ref='refRouterView')
      ...
</template>

• javascript
• typescript
• vue.js
• vuejs3

4 Answers 4

If you ref a DOM node, you don't have an $el property, the ref directly points to the DOM node:
https://v3.vuejs/guide/position-api-template-refs.html

And for the typescript part, you have to define the type like this as the refRouterView is a Proxy of a certain type:
const refRouterView = ref<HTMLDivElement>();

Then you can directly access the attributes:
refRouterView.value.offsetHeight

(this.$refs.refRouterView as Vue & { $el: () => any }).$el.offsetHeight

Please refer to it： Vetur bug or code error? “property ‘$el’ does not exist on type ‘SVGelement’

const refRouterView = ref<typeof RouterView | null>(null)

If you ref is an origin Element, then you don't have to access $el, you can access the dom directily by .value. You need to access $el while you are trying to access a custom ponent, and you need to get the type with ref<InstanceType<typeof YourComponent> | null>(null), here below is an example:

<template>
    <div class="canvas" ref="canvas"></div>
    <knife_map ref="svgContainer" class="knife_map" :style="{ transform: svgPosition }"></knife_map>


</template>
<script setup lang="ts">
import knife_map from './ponents/knife_map.vue';

const canvas = ref<HTMLDivElement | null>(null)
onMounted(() => {
  const { width, height }: { [x: string]: number } = svgContainer.value?.$el.getBoundingClientRect()
  const { width: cvs_width, height: cvs_height } = canvas.value?.getBoundingClientRect() || {}
  console.log('width,height', width, height)
  console.log('cvs_width,cvs_height', cvs_width, cvs_height)
})
</script>