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

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.')
		})
	}
})