Skip to content

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

License

Notifications You must be signed in to change notification settings

heavyy/vue-intersect

Repository files navigation

Vue Intersect

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

npm version Coverage Status Build status

Table of content

Introduction

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.

Demo

We've made a basic demo of how you might want to use vue-intersect. The code is available in the gh-pages branch and the part where vue-intersect is used can be found here.

Hackernews infinite scroll demo

Please keep in mind that the demo is not production code. Use it as an inspiration.

Installation

Simply install using your favorite package manager 🔥

⚠️ If you're using Vue 3 then install vue-intersect@next

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>

Properties

Property Type Default Required Description
threshold Array [0, 0.2] no MDN docs
root HTMLElement null no MDN docs
rootMargin String 0px 0px 0px 0px no MDN docs

Events

Name Arguments Description
change IntersectionObserverEntry Event fired on any inte.
enter IntersectionObserverEntry Event fired when the element is intersected (visible on the screen)
leave IntersectionObserverEntry Event fired when the element is not intersected (not visible on the screen)
destroyed None Fired when the underlying element is destroyed

The enter and leave event is sugar, for an often performed operation. You still have to set the threshold to e.g. [0, 0.2] (default). If you leave out "0", it will never call the leave event.

The events is compliant with Vue's event modifiers. This means that you could add .once to the events to make sure you only trigger your event handler once.

Polyfill

The IntersectionObserver API is not currently available in all browsers (IE11, Safari and iOS Safari). If you intend to support these browsers, you'll need to add a poylfill to your bundle.

WICG IntersectionObserver Polyfill is highly recommended.