# 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](https://github.com/camwiegert/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

```html
<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.

```js
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

``` bash
# 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](https://github.com/vuejs/vueify).

## Licence

MIT