vue-intersect

Vue Intersect

A Vue component to add intersection observe a Vue component or HTML element.

Table of content

• Introduction
• Installation
• Usage
• Properties
• Events
• Polyfill

Introduction

The IntersectionObserver is an amazing API which allows you to observe one or more HTMLElement for when it has enterede 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 @intersected="msg = 'Intersected!'">
    <div>{{ msg }}</div>
  </intersect>
</template>

<script>
  import Intersect from 'vue-intersect'

  export default {
    components: { Intersect },
    data () {
      return {
        msg: 'Not intersected.'
      }
    },
    methods: {
      onIntersected () {
        alert('Element has intersected.')
      }
    }
  }
</script>

Properties

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

Events

Name	Arguments	Description
intersected	none	Event fired on intersected.

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 higly recommended.