Initial commit

app/plugins/visibility-directive.ts

@@ -0,0 +1,24 @@
+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)
+    }
+  })
+})