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
Bundler (Webpack, Rollup)
Vue
or
components: Intersect Mutation Resize
Browser
<!-- Include after Vue --><!-- Local files --> <!-- From CDN -->
📒 Components
<intersect>
IntersectionObserver - 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
<Mutation>
MutationObserver - 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
<resize>
ResizeObserver - Props
N/A
Events
resize
Usage
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