vue-inview

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