vue-observable
Advanced tools
Vue Components for the IntersectionObserver, MutationObserver and ResizeObserver APIs
Abstract Vue Components to utilizing the IntersectionObserver, MutationObserver and ResizeObserver Browser APIs
🔥 Please keep in mind that you will need polyfills
npm install --save vue-observable
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}
}
<!-- Include after Vue -->
<!-- Local files -->
<script src="vue-observable/dist/vue-observable.js"></script>
<!-- From CDN -->
<script src="https://unpkg.com/vue-observable"></script>
<intersect>The <intersect> component will detect if a given element is in the viewport. And emit an event.
| Prop | Required | Default |
|---|---|---|
| root | no | null |
| rootMargin | no | 0px 0px 0px 0px |
| threshold | no | [0, 0.2] |
enterleavechange<intersect @enter="enterMethod" @leave="leaveMethod" @change="changeMethod">
<some-component-or-node>
</intersect>
<Mutation>| Prop | Required | Default |
|---|---|---|
| attributeFilter | no | null |
| attributeOldValue | no | null |
| attributes | no | false |
| characterData | no | null |
| characterDataOldValue | no | null |
| childList | no | false |
| subtree | no | false |
mutation<mutation @mutation="mutationMethod">
<some-component-or-node>
</mutation>
<resize>N/A
resize<resize @resize="resizeMethod">
<some-component-or-node>
</resize>
npm run dev
npm run dev:coverage
Bundle the js and css of to the dist folder:
npm run build
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
FAQs
Vue Components for the IntersectionObserver, MutationObserver and ResizeObserver APIs
The npm package vue-observable receives a total of 3 weekly downloads. As such, vue-observable popularity was classified as not popular.
We found that vue-observable demonstrated a not healthy version release cadence and project activity because the last version was released a year ago. It has 1 open source maintainer collaborating on the project.
Did you know?
Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.
Research
/Security News
Threat actors hijacked Toptal’s GitHub org, publishing npm packages with malicious payloads that steal tokens and attempt to wipe victim systems.
Research
/Security News
Socket researchers investigate 4 malicious npm and PyPI packages with 56,000+ downloads that install surveillance malware.
Security News
The ongoing npm phishing campaign escalates as attackers hijack the popular 'is' package, embedding malware in multiple versions.