support for nuxt3

[frederic117]

Doesn't seem to wrk with nuxt3

[CavalcanteLeo]

vue-observe-visibility seems to be abandoned

[PikachuEXE]

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]

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:

<script setup>
const visibilityChanged = (isVisible, entry) => {
  isVisible
    ? entry.target.classList.add('is-visible')
    : entry.target.classList.remove('is-visible')
}
</script>

(I did not managed to add the visibilityChanged function directly inside vue-observe-visibility.ts)

[PikachuEXE]

Confirm that it's working

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

[jschroeter]

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