# vue-mixin-in-viewport

> Vue 2.0 mixin to observe intersection using the Intersection Observer API

Latest version **0.0.2** (published 2017-09-17) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-mixin-in-viewport
pnpm add vue-mixin-in-viewport
yarn add vue-mixin-in-viewport
bun add vue-mixin-in-viewport
```

## 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.0.2 |
| Published | 2017-09-17 |
| First published | 2017-09-17 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 2 |
| Author | René Herrmann |
| Maintainers | herrmannplatz |

## Links

- npm: https://www.npmjs.com/package/vue-mixin-in-viewport
- Repository: https://github.com/herrmannplatz/vue-mixin-in-viewport
- Homepage: https://github.com/herrmannplatz/vue-mixin-in-viewport#readme
- Issues: https://github.com/herrmannplatz/vue-mixin-in-viewport/issues
- npm.io page: https://npm.io/package/vue-mixin-in-viewport

## Dependencies (1)

- [intersection-observer](https://npm.io/package/intersection-observer.md) ^0.4.2

## Recent versions

- 0.0.2 (latest) — 2017-09-17
- 0.0.1 — 2017-09-17
- 0.0.0 — 2017-09-17

## README

# vue-mixin-in-viewport
Vue 2.0 mixin to observe intersection using the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API)

## Note

This mixin requires the [Intersection Observer API](https://developer.mozilla.org/en-US/docs/Web/API/Intersection_Observer_API). In case you want to support older browsers, there is `vue-mixin-in-viewport.polyfill.js` which comes with a [polyfill](https://www.npmjs.com/package/intersection-observer).

## Installation

```bash
$ npm install vue-mixin-in-viewport
```

## Usage

```js
// without polyfill
import inViewportMixin from 'vue-mixin-in-viewport'

// with polyfill
import viewportMixin from 'vue-mixin-in-viewport/dist/vue-mixin-in-viewport.polyfill'

Vue.component('avatar-component', {
  template: '#avatar-component',
  mixins: [inViewportMixin]
})

```html
<avatar-component v-on:viewport="onViewportEnter"></avatar-component>
```

## Props

| Name | Type | Default | Description |
| :------------- | :--------- | :--------- | :------------- |
| root | String | null | Selector specifying element that is used as the viewport for checking visiblity of the target. |
| rootMargin | Number | 0 | Margin around the root. |
| threshold | Number | 0 | Indicates at what percentage of the target's visibility the observer's callback should be executed. |
| once | Boolean | false | Fire only once. |

## Data

| Name | Type | Description |
| :------------- | :--------- | :------------- |
| inViewport | Boolean | `true` if component is in viewport |

## Events

| Name | Description |
| :------------- | :------------- |
| viewport-enter | Fire when target enters the viewport/root element. |
| viewport-change | Fire when target enters or leaves the viewport/root element. |
| viewport-leave | Fire when target leavs the viewport/root element. |

## License

[MIT](http://opensource.org/licenses/MIT)

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