Ecosyste.ms: Awesome
An open API service indexing awesome lists of open source software.
https://github.com/apertureless/vue-observable
IntersectionObserver, MutationObserver and PerformanceObserver in Vue.js
https://github.com/apertureless/vue-observable
abstract browser-api change-detection components intersection-observer mutations-observer resize-images viewport vue vue2 vuejs vuejs2
Last synced: 21 days ago
JSON representation
IntersectionObserver, MutationObserver and PerformanceObserver in Vue.js
- Host: GitHub
- URL: https://github.com/apertureless/vue-observable
- Owner: apertureless
- License: mit
- Created: 2017-10-16T10:18:12.000Z (about 7 years ago)
- Default Branch: master
- Last Pushed: 2019-05-15T16:11:40.000Z (over 5 years ago)
- Last Synced: 2024-10-12T08:49:23.319Z (about 1 month ago)
- Topics: abstract, browser-api, change-detection, components, intersection-observer, mutations-observer, resize-images, viewport, vue, vue2, vuejs, vuejs2
- Language: JavaScript
- Size: 95.7 KB
- Stars: 24
- Watchers: 3
- Forks: 4
- Open Issues: 0
-
Metadata Files:
- Readme: README.md
- Changelog: CHANGELOG.md
- Contributing: CONTRIBUTING.md
- License: LICENSE
Awesome Lists containing this project
README
# vue-observable
[](https://www.npmjs.com/package/vue-observable) [](https://vuejs.org/)
> Abstract Vue Components to utilizing the IntersectionObserver, MutationObserver and ResizeObserver Browser APIs
🔥 Please keep in mind that you will need polyfills
## 🔧 Installation
```bash
npm install --save vue-observable
```
## 👈 Usage
### Componentlist
- [``](./src/IntersectionObserver.js)
- [``](./src/MutationObserver.js)
- [``](./src/ResizeObserver.js)
### Bundler (Webpack, Rollup)
```js
import Vue from 'vue'
import VueObservable from 'vue-observable'
Vue.use(VueObservable)
```
or
```js
import {Intersect, Mutation, Resize} from 'vue-observable'
export default {
components: {Intersect, Mutation, Resize}
}
```
### Browser
```html
```
## 📒 Components
### IntersectionObserver - [``](/src/IntersectionnObserver.js)
The `` component will detect if a given element is in the viewport. And emit an event.
#### Props
| Prop | Required | Default |
| --- | --- | --- |
| [root](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/root) | no | null
| [rootMargin](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/rootMargin) | no | `0px 0px 0px 0px`|
| [threshold](https://developer.mozilla.org/en-US/docs/Web/API/IntersectionObserver/thresholds) | no | `[0, 0.2]`|
#### Events
- `enter`
- `leave`
- `change`
#### Usage
```html
```
### MutationObserver - [``](/src/MutationObserver.js)
#### Props
| Prop | Required | Default |
| --- | --- | --- |
| [attributeFilter](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributeFilter) | no | null
| [attributeOldValue](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributeOldValue) | no | null
| [attributes](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/attributes) | no | false
| [characterData](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterData) | no |null
| [characterDataOldValue](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/characterDataOldValue) | no |null
| [childList](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/childList) | no |false
| [subtree](https://developer.mozilla.org/en-US/docs/Web/API/MutationObserverInit/subtree) | no |false
#### Events
- `mutation`
#### Usage
```html
```
### ResizeObserver - [``](/src/ResizeObserver.js)
#### Props
N/A
#### Events
- `resize`
#### Usage
```html
```
## Development
### Launch visual tests
```bash
npm run dev
```
### Launch Karma with coverage
```bash
npm run dev:coverage
```
### Build
Bundle the js and css of to the `dist` folder:
```bash
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.
```bash
# 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](http://opensource.org/licenses/MIT)
## Support
