vue-inview

Inview implementation for Vue 2 based on in-view.

Use this library to register events when elements come into or leave the view port.

Prior Art

This is largely based on in-view but uses no depeendencies and allows for a more flexible API, i.e. you can pass DOM nodes as input of vue-inview instead of only being allowed to pass a selector string.

API

<li v-inview></li>
<!-- or -->
<li v-inview="{ custom: 'object', id: 'element-1', msg: 'message'}"></li>

In your view instance or everywhere from the root node, you can now listen for the enter and leave event and accompanied data.

import Vue from 'vue'
import App from './App.vue'
import Inview from 'vue-inview'
 
Vue.use(Inview)
 
new Vue({ // eslint-disable-line no-new
  mounted() {
    this.$on('inview-enter', (data, node) => {
      console.log(data, node)
    })
    this.$on('inview-leave', (data, node) => {
      console.log(data, node)
    })
  },
  el: '#app',
  render: (h) => h(App)
})
 

Please find a detailed example in the example/ directory.

Build Setup

# install dependencies
npm install
 
# serve with hot reload at localhost:8080
npm run dev
 
# build for production with minification
npm run build
 
# lint all *.js and *.vue files
npm run lint
 
# run unit tests
npm test

For more information see the docs for vueify.

Licence

MIT