Skip to content


Switch branches/tags

Name already in use

A tag already exists with the provided branch name. Many Git commands accept both tag and branch names, so creating this branch may cause unexpected behavior. Are you sure you want to create this branch?


Failed to load latest commit information.
Latest commit message
Commit time
December 28, 2020 19:39
May 6, 2019 18:36
December 28, 2020 19:33
September 18, 2017 16:50
December 23, 2016 16:44
December 28, 2020 19:31
May 28, 2018 13:37
May 26, 2020 01:25
December 28, 2020 19:31
October 4, 2018 15:18
December 28, 2020 19:57
May 6, 2019 19:16
May 6, 2019 19:16
December 28, 2020 19:38
December 28, 2020 19:51

vue-observe-visibility logo


Detect when an element is becoming visible or hidden on the page. Demo

Become a Patreon


sponsors logos

Table of contents


npm install --save vue-observe-visibility

⚠️ This plugin uses the Intersection Observer API that is not supported in every browser (currently supported in Edge, Firefox and Chrome). You need to include a polyfill to make it work on incompatible browsers.


import Vue from 'vue'
import VueObserveVisibility from 'vue-observe-visibility'



import Vue from 'vue'
import { ObserveVisibility } from 'vue-observe-visibility'

Vue.directive('observe-visibility', ObserveVisibility)


<script src="vue.js"></script>
<script src=""></script>

The plugin should be auto-installed. If not, you can install it manually with the instructions below.

Install all the directives:


Use specific directives:

Vue.directive('observe-visibility', VueObserveVisibility.ObserveVisibility)


The v-observe-visibility directive is very easy to use. Just pass a function as the value:

<div v-observe-visibility="visibilityChanged">

This also works on components:

<MyComponent v-observe-visibility="visibilityChanged" />

The function will be called whenever the visiblity of the element changes with the argument being a boolean (true means the element is visible on the page, false means that it is not).

The second argument is the corresponding IntersectionObserverEntry object.

visibilityChanged (isVisible, entry) {
  this.isVisible = isVisible

IntersectionObserver options

It's possible to pass the IntersectionObserver options object using the intersection attribute:

<div v-observe-visibility="{
  callback: visibilityChanged,
  intersection: {
    root: ...,
    rootMargin: ...,
    threshold: 0.3,


It can be useful to listen for when the element is visible only once, for example to build introduction animations. Set the once option to true:

<div v-observe-visibility="{
  callback: visibilityChanged,
  once: true,

Throttling visibility

You can use the throttle options (in ms) specifying minimal state duration after which an event will be fired. It's useful when you are tracking visibility while scrolling and don't want events from fastly scrolled out elements.

<div v-observe-visibility="{
  callback: visibilityChanged,
  throttle: 300,

You can also pass a leading option to trigger the callback the first time when the visibility changes without waiting for the throttle delay. I can either be visible, hidden or both.

<div v-observe-visibility="{
  callback: visibilityChanged,
  throttle: 300,
  throttleOptions: {
    leading: 'visible',

Passing custom arguments

You can add custom argument by using an intermediate function:

<div v-observe-visibility="(isVisible, entry) => visibilityChanged(isVisible, entry, customArgument)">

Here visibilityChanged will be call with a third custom argument customArgument.

Disabling the observer

Passing a falsy value to the directive will disable the observer:

  v-for="(item, index) of items"
  v-observe-visibility="index === items.length - 1 ? visibilityChanged : false"


<div id="app">
  <button @click="show = !show">Toggle</button>
    <input type="checkbox" v-model="isVisible" disabled/> Is visible?
  <div ref="test" v-show="show" v-observe-visibility="visibilityChanged">Hello world!</div>

new Vue({
  el: '#app',
  data: {
    show: true,
    isVisible: true,
  methods: {
    visibilityChanged (isVisible, entry) {
      this.isVisible = isVisible