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 18 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
Four npm packages disguised as cryptographic tools steal developer credentials and send them to attacker-controlled Telegram infrastructure.
Security News
Ruby maintainers from Bundler and rbenv teams are building rv to bring Python uv's speed and unified tooling approach to Ruby development.
Security News
Following last week’s supply chain attack, Nx published findings on the GitHub Actions exploit and moved npm publishing to Trusted Publishers.