search

Akryum / vue-observe-visibility

Detect when an element is becoming visible or hidden on the page.
https://jsfiddle.net/Akryum/ppt7endj/
1.65k stars 87 forks source link

support for nuxt3 #255

Open frederic117 opened 2 years ago

frederic117 commented 2 years ago

Doesn't seem to wrk with nuxt3

CavalcanteLeo commented 2 years ago

vue-observe-visibility seems to be abandoned

PikachuEXE commented 1 year ago

Try https://www.npmjs.com/package/vue-intersection-observer ? (I just found it, haven't even read its README Update 1: That doesn't work in nuxt 3, Trying https://www.npmjs.com/package/@lamsal-de/vue-element-in-view Update 2: https://www.npmjs.com/package/@lamsal-de/vue-element-in-view works but less options

Saurou commented 1 year ago

All I did was:

  1. Install the new vue-observe-visibility @next yarn add vue-observe-visibility@next --dev

  2. add a vue-observe-visibility.ts file inside /plugins folder, with this code inside:

    
import VueObserveVisibility from 'vue-observe-visibility'

export default defineNuxtPlugin((nuxtApp) => { nuxtApp.vueApp.use(VueObserveVisibility) })


3. Apply the usual to your component:
`v-observe-visibility=“visibilityChanged"`

4. Make your function in the script, for exampe adding and removing a class:


(I did not managed to add the visibilityChanged function directly inside vue-observe-visibility.ts)
PikachuEXE commented 1 year ago

Confirm that it's working

More about nuxt 3 plugins: https://nuxt.com/docs/guide/directory-structure/plugins

jschroeter commented 10 months ago

https://vueuse.org/core/useElementVisibility/#useelementvisibility seems to be a good alternative.