support for nuxt3
frederic117 opened this issue · comments
Doesn't seem to wrk with nuxt3
vue-observe-visibility
seems to be abandoned
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
All I did was:
-
Install the new vue-observe-visibility @next
yarn add vue-observe-visibility@next --dev
-
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)
})
-
Apply the usual to your component:
v-observe-visibility=“visibilityChanged"
-
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)
Confirm that it's working
More about nuxt 3 plugins:
https://nuxt.com/docs/guide/directory-structure/plugins
https://vueuse.org/core/useElementVisibility/#useelementvisibility seems to be a good alternative.