25 lines
582 B
TypeScript
25 lines
582 B
TypeScript
export default defineNuxtPlugin((nuxtApp) => {
|
|
/**
|
|
* Directive that calls a callback when an element gets visible in the viewport.
|
|
*/
|
|
nuxtApp.vueApp.directive('on-visible', {
|
|
mounted(el, binding) {
|
|
const callback = binding.value
|
|
|
|
const observer = new IntersectionObserver(
|
|
(entries) => {
|
|
entries.forEach((entry) => {
|
|
if (entry.isIntersecting) {
|
|
callback(entry)
|
|
observer.disconnect()
|
|
}
|
|
})
|
|
},
|
|
{ threshold: 0.5 }
|
|
)
|
|
|
|
observer.observe(el)
|
|
}
|
|
})
|
|
})
|