$refs and the Vue 3 Composition API

  You block advertising 😢
Would you like to buy me a ☕️ instead?

If you’re used to working with Vue 2 $refs and switch to the Vue 3 Composition API, you might wonder how to use $refs inside the new setup() method. In this article, we find out how to use the new ref() function as a replacement for static and dynamic HTML element references.

Static $refs

When using the Vue 3 Composition API via the setup() method, we don’t have access to this.$refs, rather, we can use the new ref() function for the same result.

<script>
import {
  onMounted,
  ref,
} from 'vue';

export default {
  setup() {
    const headline = ref(null);

    // Before the component is mounted, the value
    // of the ref is `null` which is the default
    // value we've specified above.
    onMounted(() => {
      // Logs: `Headline`
      console.log(headline.value.textContent);
    });

    return {
      // It is important to return the ref,
      // otherwise it won't work.
      headline,
    };
  },
};
</script>

<template>
  <div>
    <h1 ref="headline">
      Headline
    </h1>
    <p>Lorem ipsum ...</p>
  </div>
</template>

Looking for a Vue.js job?

at ·
at ·
at ·


Dynamic $refs in v-for

You might wonder how this can work with dynamic references. Luckily after a short chat with Carlos Rodrigues, I knew the answer (the information is also in the official API documentation, but I somehow missed it).

<template>
  <div v-for="(item, i) in list" :ref="el => { divs[i] = el }">
    {{ item }}
  </div>
</template>

<script>
import {
  onBeforeUpdate,
  reactive,
  ref,
} from 'vue';

export default {
  setup() {
    const list = reactive([1, 2, 3]);
    const divs = ref([]);

    // Make sure to reset the refs before each update.
    onBeforeUpdate(() => {
      divs.value = [];
    });

    return {
      list,
      divs,
    };
  },
};
</script>

Above you can see the example für dynamic Vue Composition API $refs from the official documentation.


Do you want to learn more about advanced Vue.js techniques?

Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture.


Wrapping it up

Although at first, I didn’t like the new $refs API very much, it gets the job done. I think it’s only a matter of time until we get used to the new way of doing things with the Composition API.


Do you want to learn how to build advanced Vue.js applications?

Register for the Newsletter of my upcoming book: Advanced Vue.js Application Architecture.



Do you enjoy reading my blog?

You can buy me a ☕️ on Ko-fi!

☕️ Support Me on Ko-fi