apertureless / 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

vue-observable's Issues

Mutation & Resize are not exported

The docs state that you should be able to use the mutation observer and resize observer as well, but it looks like those are not exported in the currently published version of the module ( 0.1.1 ) , Any chance a new release could be published from the current master as I see there was a PR on the 25th of March to expose them? https://github.com/apertureless/vue-observable/pull/2/files

Can't use a ref as root prop

First off, finding this really useful, so thank you.

However I've noticed I'm unable to pass in an element with a ref as the root prop in the <intersect> component.

The error I get is that HTMLDivElement is not of type Object. Is there any workaround I could use? I don't see any examples of that prop being used in the tests currently, so I'm a bit unsure on how to proceed.