Add intersection-observer to a Vue component or HTML element

Vue Intersect

A Vue component to add intersection-observer to a Vue component or HTML element.

The IntersectionObserver is an amazing API which allows you to observe one or more HTMLElement for when it has entered or left the viewport.

This API has many use cases like, infinite-scroll, lazy-loading or animations when an element enters the viewport.

Installation

Simply install using your favorite package manager ?

NPM

npm install vue-intersect --save

Yarn

yarn add vue-intersect

Usage

The package acts as an abstract component, much like what you may know from keep-alive or transition.

This means that it's basically a "decorator". A component which does not output any markup to the DOM, but adds the functionality under the hood ?.

.vue

<template>
  <intersect @enter="msg = 'Intersected'" @leave="msg = 'Not intersected'">
    <div>{{ msg }}</div>
  </intersect>
</template>

<script>
  import Intersect from 'vue-intersect'

  export default {
    components: { Intersect },
    data () {
      return {
        msg: 'I will change'
      }
    }
  }
</script>

Live Demo

https://heavyy.github.io/vue-intersect/

GitHub