Nuxt•3y ago

useElementVisibility in custom directive always returns false

I'm building a custom directive with useElementVisibility but it always returns false for every element regardless if it is in the viewport or not. It kind of worked with

@vueuse/core

@vueuse/core

and

@vueuse/nuxt

@vueuse/nuxt

in version 9 but after upgrading to 10 it stopped working completely. The problem in version 9 was that it return correct state on page load but after route change it always returned true.

Has anyone tried this and know how to work with useElementVisibility in a custom directive?

<template>
  <div v-visibility/>
</template>

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('visibility', {
    mounted(el) {
      if (useElementVisibility(el).value) {
        el.classList.add('visible');
      );
    }
  });
});

<template>
  <div v-visibility/>
</template>

export default defineNuxtPlugin((nuxtApp) => {
  nuxtApp.vueApp.directive('visibility', {
    mounted(el) {
      if (useElementVisibility(el).value) {
        el.classList.add('visible');
      );
    }
  });
});

Cue•4/28/23, 8:35 AM

Ensure you update vueuse to 10.1.0. Initial release of 10 had bugs in useIntersectionObserver composable which is used by useElementVisibility.

HenrikOP•4/28/23, 8:38 AM

Both packages are on 10.1.0

Cue•4/28/23, 9:21 AM

Ah. The return value is false by default, my guess is your directive is reading the value before it is updated by IntersectionObserver.

Cue•4/28/23, 9:21 AM

You can track the change by watching the value, and updating the class accordingly.

Cue•4/28/23, 9:22 AM

For example:

HenrikOP•4/28/23, 9:26 AM

Wonderful, will give that a go. Thank you!

HenrikOP•5/2/23, 6:33 AM

Adding a small timeout fixes the issue in my use case. It is not optimal since it has to be matched with timing of page transitions but even without a page transition a small delay is necessary to get an accurate value.