# vue-inview

> Inview implementation for Vue 2 based on in-view.

Latest version **0.2.0** (published 2016-12-04) · 0 weekly downloads

## Install

```sh
npm install vue-inview
pnpm add vue-inview
yarn add vue-inview
bun add vue-inview
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.2.0 |
| Published | 2016-12-04 |
| First published | 2016-12-04 |
| Weekly downloads | 0 |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | Robert Jefe Lindstaedt |
| Maintainers | eljefederodeodeljefe |

## Links

- npm: https://www.npmjs.com/package/vue-inview
- Repository: https://github.com/TEDDBerlin/vue-inview
- Homepage: https://github.com/TEDDBerlin/vue-inview#readme
- Issues: https://github.com/TEDDBerlin/vue-inview/issues
- npm.io page: https://npm.io/package/vue-inview

## Dependencies (1)

- [element-inview](https://npm.io/package/element-inview.md) ^0.1.0

## Recent versions

- 0.2.0 (latest) — 2016-12-04
- 0.1.4 — 2016-12-04
- 0.1.3 — 2016-12-04
- 0.1.2 — 2016-12-04
- 0.1.0 — 2016-12-04

## README

# 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

---
_Source: https://npm.io/package/vue-inview · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._