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');
      );
    }
  });
});

Nuxt•3y ago•

7 replies

Henrik

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

<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');
      );
    }
  });
});

useElementVisibility in custom directive always returns false

Similar Threads

useElementVisibility in custom directive always returns false

Similar Threads

Similar Threads

Similar Threads