# vue-observable [![npm](https://img.shields.io/npm/v/vue-observable.svg)](https://www.npmjs.com/package/vue-observable) [![vue2](https://img.shields.io/badge/vue-2.x-brightgreen.svg)](https://vuejs.org/) > Abstract Vue Components to utilizing the IntersectionObserver, MutationObserver and ResizeObserver Browser APIs 🔥 Please keep in mind that you will need polyfills ## 🔧 Installation ```bash npm install --save vue-observable ``` ## 👈 Usage ### Componentlist - [``](./src/IntersectionObserver.js) - [``](./src/MutationObserver.js) - [``](./src/ResizeObserver.js) ### Bundler (Webpack, Rollup) ```js import Vue from 'vue' import VueObservable from 'vue-observable' Vue.use(VueObservable) ``` or ```js import {Intersect, Mutation, Resize} from 'vue-observable' export default { components: {Intersect, Mutation, Resize} } ``` ### Browser ```html ``` ## 📒 Components ### IntersectionObserver - [``](/src/IntersectionnObserver.js) The `` component will detect if a given element is in the viewport. And emit an event. #### Props | Prop | Required | Default | | --- | --- | --- | | [root](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) | no | null | [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) | no | `0px 0px 0px 0px`| | [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds) | no | `[0, 0.2]`| #### Events - `enter` - `leave` - `change` #### Usage ```html

``` ### MutationObserver - [``](/src/MutationObserver.js) #### Props | Prop | Required | Default | | --- | --- | --- | | [attributeFilter](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributeFilter) | no | null | [attributeOldValue](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributeOldValue) | no | null | [attributes](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributes) | no | false | [characterData](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterData) | no |null | [characterDataOldValue](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterDataOldValue) | no |null | [childList](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/childList) | no |false | [subtree](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/subtree) | no |false #### Events - `mutation` #### Usage ```html

``` ### ResizeObserver - [``](/src/ResizeObserver.js) #### Props N/A #### Events - `resize` #### Usage ```html

``` ## Development ### Launch visual tests ```bash npm run dev ``` ### Launch Karma with coverage ```bash npm run dev:coverage ``` ### Build Bundle the js and css of to the `dist` folder: ```bash npm run build ``` ## Publishing The `prepublish` hook will ensure dist files are created before publishing. This way you don't need to commit them in your repository. ```bash # Bump the version first # It'll also commit it and create a tag npm version # Push the bumped package and tags git push --follow-tags # Ship it 🚀 npm publish ``` ## License [MIT](http://opensource.org/licenses/MIT) ## Support