kangxiangli/vue-observable

IntersectionObserver, MutationObserver and PerformanceObserver in Vue.js

vue-observable

Abstract Vue Components to utilizing the IntersectionObserver, MutationObserver and ResizeObserver Browser APIs

🔥 Please keep in mind that you will need polyfills

🔧 Installation

npm install --save vue-observable

👈 Usage

Componentlist

• <intersect>
• <mutation>
• <resize>

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

• enter
• leave
• change

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 dev

Launch Karma with coverage

npm run dev:coverage

Build

Bundle the js and css of to the dist folder:

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.

# 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

Support