holic / vue-viewport

Vue plugin for detecting when elements enter and leave the viewport

Viewport plugin for Vue

This Vue plugin adds a detect-viewport directive, allowing you to detect viewport enter and leave events in your VM.

Usage

Follow the official Vue plugin documentation for installation instructions.

Once the plugin is added to your project, you can add a v-detect-viewport attribute to any VM element and then listen to viewportenter and viewportleave events.

<div v-component="my-component" v-detect-viewport>
	<p>Am I in the viewport?</p>
</div>

Vue.component('my-component', {
	created: function () {
		this.$on('viewportenter', function () {
			console.log('I have entered the viewport.')
		})
		this.$on('viewportleave', function () {
			console.log('I have left the viewport.')
		})
	}
})