vue-observable
Abstract Vue Components to utilizing the IntersectionObserver, MutationObserver and ResizeObserver Browser APIs
🔧 Installation
npm install --save vue-observable👈 Usage
Componentlist
Bundler (Webpack, Rollup)
import Vue from 'vue'
import VueObservable from 'vue-observable'
Vue.use(VueObservable)or
import {Intersect, Mutation, Resize} from 'vue-observable'
export default {
components: {Intersect, Mutation, Resize}
}Browser
<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-observable/dist/vue-observable.js"></script>
<!-- From CDN -->
<script src="https://unpkg.com/vue-observable"></script>📒 Components
IntersectionObserver - <intersect>
The <intersect> component will detect if a given element is in the viewport. And emit an event.
Props
| Prop | Required | Default |
|---|---|---|
| root | no | null |
| rootMargin | no | 0px 0px 0px 0px |
| threshold | no | [0, 0.2] |
Events
enterleavechange
Usage
<intersect @enter="enterMethod" @leave="leaveMethod" @change="changeMethod">
<some-component-or-node>
</intersect>MutationObserver - <Mutation>
Props
| Prop | Required | Default |
|---|---|---|
| attributeFilter | no | null |
| attributeOldValue | no | null |
| attributes | no | false |
| characterData | no | null |
| characterDataOldValue | no | null |
| childList | no | false |
| subtree | no | false |
Events
mutation
Usage
<mutation @mutation="mutationMethod">
<some-component-or-node>
</mutation>ResizeObserver - <resize>
Props
N/A
Events
resize
Usage
<resize @resize="resizeMethod">
<some-component-or-node>
</resize>Development
Launch visual tests
npm run devLaunch Karma with coverage
npm run dev:coverageBuild
Bundle the js and css of to the dist folder:
npm run buildPublishing
The prepublish hook will ensure dist files are created before publishing. This
way you don't need to commit them in your repository.
# 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