https://github.com/holic/vue-viewport

Vue plugin for detecting when elements enter and leave the viewport
https://github.com/holic/vue-viewport

Last synced: 4 months ago
JSON representation

Vue plugin for detecting when elements enter and leave the viewport

• Host: GitHub
• URL: https://github.com/holic/vue-viewport
• Owner: holic
• License: mit
• Archived: true
• Created: 2014-06-26T00:01:01.000Z (over 10 years ago)
• Default Branch: master
• Last Pushed: 2014-06-26T00:45:44.000Z (over 10 years ago)
• Last Synced: 2024-08-01T00:39:58.101Z (6 months ago)
• Language: JavaScript
• Size: 133 KB
• Stars: 45
• Watchers: 5
• Forks: 9
• Open Issues: 2
• Metadata Files:
  • Readme: README.md
  • License: LICENSE

Awesome Lists containing this project

• awesome-vue-cn - Vue in viewport detection directive ★27

README

        
# Viewport plugin for [Vue](http://vuejs.org/)

This [Vue plugin](http://vuejs.org/guide/plugin.html) adds a `detect-viewport` directive, allowing you to detect viewport enter and leave events in your VM.

## Usage

Follow the [official Vue plugin](http://vuejs.org/guide/plugin.html) 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.

```html



	
Am I in the viewport?



```


```js

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

		})

	}

})

```