VueJS directive to observe changes in DOM use MutationObserver API

Related tags

Event Handling vue-mutation-observer
Overview

vue-mutation-observer

VueJS directive to observe changes in DOM use MutationObserver API

Install

npm install vue-mutation-observer

or

yarn add vue-mutation-observer

CommonJS

You can use any build tool which supports commonjs:

// register globally
const observer =  require('vue-mutation-observer');
Vue.use(observer)

// or for a single instance
const { observer } = require('vue-mutation-observer');
new Vue({
  directives: { observer }
})

Or in ES2015:

// register globally
import observer from 'vue-mutation-observer'
Vue.use(observer)

// or for a single instance
import { observer } from 'vue-mutation-observer'
new Vue({
  directives: { observer }
})

Usage

Use v-observer directive to observe DOM mutations in node and it's children.

<div v-observer:subtree.childList="handler">
  // some content here
</div>
import { observer } from 'vue-mutation-observer'

export default {
  directives: { observer },
  methods: {
    handler (mutations) { console.log(mutations) }
  }
}

Arguments

Argument Description
subtree Extend monitoring to the entire subtree of node. All of the other properties are then extended to all of the nodes in the subtree instead of applying solely to the target node.

Modifiers

Modifier Description
characterData Add properties characterData and characterDataOldValue to observer configuration
attributes Add properties attributes and attributeOldValue to observer configuration
childList Add property childList to observer configuration

If no modifiers is define - all properties in config will be defines as true.
MutationObserver configuration

Value

Value may be a function, which handle your mutation or an object with two properties: callback and config.

You might also like...
A Vue.js (v2.x+) component to provide scroll and observe resize.

vue-scrollbox A Vue.js (v2.x+) component to provide scroll and observe resize. Installation NPM $ npm install vue-scrollbox --save import the script:

John White 1 Jun 19, 2018
Render children into a DOM node that exists outside the DOM hierarchy of the parent component

Portals provide a first-class way to render children into a DOM node that exists outside the DOM hierarchy of the parent component.

Nourse 0 Nov 8, 2018
Directive to animate changes of numerical property
Directive to animate changes of numerical property

Installation $ npm install --save vue-numbers-animation Usage Just import: import numbersAnimation from 'vue-numbers-animation' Vue.directive("numbers

Nikita Abaturov 1 Jan 3, 2022
A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)
A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令)

vue-stickto 简体中文 A vue directive that support multiple DOM Node stick to top automatically (一个支持多DOM元素自动吸顶的vue指令) Online Demo Here Install npm install

zhaoyenb 53 May 19, 2021
A vue directive to keep dom ratio

vue-keep-ratio [中文项目介绍] As there comes a new css attribute: aspect-ratio, I picked up my old work vue-keep-ratio, use a more adaptive (but hack) way t

Aiello 6 Sep 13, 2021
A directive-supported plugin for transfering DOM to another location in Vue.js components

A directive-supported plugin for transfering DOM to another location in Vue.js components

Emil Zhai 1 Jul 13, 2019
:electric_plug: Simple VueJS component to detect offline & online changes.

V-Offline ⚡ Detect offline & online events for your vue app. This is on GitHub so let me know if I've b0rked it somewhere, give me a star ⭐ if you lik

Vinayak Kulkarni 356 Dec 23, 2022
A component to use Vue.js with Jupyter Lumino (PhosphorJS), integrating DOM & VDOM through event listeners and Vue reactivity system.
A component to use Vue.js with Jupyter Lumino (PhosphorJS), integrating DOM & VDOM through event listeners and Vue reactivity system.

vue-lumino An example project showing one way to integrate Vue.js and Lumino (née PhosphorJS). Lumino “is a library for building interactive web appli

TupiLabs 62 Dec 26, 2022
Vue table component with virtual dom and easy api.

Vue table component with virtual dom and easy api.

Jack Woods 94 Dec 2, 2022
Form builder library using VueJS 2 Virtual Dom

vue-form-builder Form builder library using VueJS 2 Virtual Dom Features This is still currently in development as an early build. Build a full form u

Anirudh Sanjeev 17 Feb 24, 2020
🎀 A Chrome extension written using Vue and Async/Await. Uses a popup display and changes badge counts.

Chrome-Ribbon-Reminder This is a Chrome extension in popup form. Ribbon Reminder was an old app I made in Swift for iOS a while back, and I think its

John Datserakis 12 Nov 24, 2022
Vue event bus plugin listening for online/offline changes
Vue event bus plugin listening for online/offline changes

vue-connection-listener Vue event bus plugin listening for online/offline changes About Whenever the navigator's connection status changes a 'connecti

Byteboomers 86 Sep 5, 2022
Enable a child components to animate when it changes the parent
Enable a child components to animate when it changes the parent

vue-parent-change-transition Enable a child components to animate when it changes the parent. It'll be useful when you create a card game. (e.g. show

null 27 Jun 4, 2021
Transition an elements reflow when the data changes.

Vue Smooth Reflow (VSR) A Vue mixin that transitions reflow. When the component's data is changed, any CSS properties that you register will transitio

Eric Guan 443 Nov 9, 2022
A pattern-placeholder for Vue that changes based on input text.
A pattern-placeholder for Vue that changes based on input text.

This plugin provides a placeholder component for Vue.js. It uses canvas to render patterns from input string like URL.

Victor 6 Apr 19, 2022
Enable a child components to animate when it changes the parent
Enable a child components to animate when it changes the parent

vue-parent-change-transition Enable a child components to animate when it changes the parent. It'll be useful when you create a card game. (e.g. show

null 27 Jun 4, 2021
Transition an elements height in response to data changes

Deprecation notice Due to an unfortunate naming decision, this package has moved to vue-smooth-reflow. vue-smooth-reflow has more features, better han

Eric Guan 38 Nov 24, 2022
This is a short project of me learning my way around Vue.js along with using Gitkraken to track changes.
This is a short project of me learning my way around Vue.js along with using Gitkraken to track changes.

Countdown Vue.js Project 👾 Table of contents General info Technologies General info This project is my one of my many experiments learning with Vue.j

Kevin Henderson 0 Nov 11, 2021
The workout platform revolutionizing the way you workout with a built-in AI coach that changes how you exercise
The workout platform revolutionizing the way you workout with a built-in AI coach that changes how you exercise

Sensai The workout platform revolutionizing the way you workout with a built-in AI coach that changes how you exercise. tldr; Sensai transforms how yo

Martin 4 May 24, 2022
Owner
null
GitHub
Vue directive to detect resize events with deboucing and throttling capacity.

Vue.resize Vue directive to detect HTML resize events based on CSS Element Queries with debouncing and throttling capacity. Demo Typical usage Simple

David Desmaisons 323 Dec 27, 2022
🔲 Vue directive to react on clicks outside an element without stopping the event propagation

v-click-outside Vue directive to react on clicks outside an element without stopping the event propagation. Great for closing dialogues and menus amon

Nicolas Del Valle 930 Dec 27, 2022
Vue 2.x directive to help a specified element listen for specific events occurring outside of itself.

vue-outside-events Vue 2.x directive to react on events outside of an element without stopping the event's propagation. Works well for handling clicks

Nicholas Hutchind 56 May 9, 2022
Directive to create mouse selection of objects in Vue.js applications

vue-selectable Overview It's common task to make mouse selection of some objects on the page. This directive makes this task extremely easy, all you n

Dmitry Zlygin 70 Dec 6, 2022
Vue 2.x directive for binding hotkeys to components.

v-hotkey Vue 2.x directive for binding hotkeys to components. Play with me https://dafrok.github.io/v-hotkey Install $ npm i v-hotkey # or $ yarn add

马金花儿 714 Dec 26, 2022
Vue directive plugin for drag event detection.

v-dragged Vue directive plugin for drag event detection. NOTE: This directive listens for mouse/touch events, and sets a handler for when a drag actio

Chris Zhan 93 Nov 16, 2022
:running: Vue.js directive to add a document event listener on escape keyup.

vue-esc ?? Vue.js directive to add a document event listener on escape keyup. Support Vue.js 2 => vue-esc@>=2.0.0 [master] Vue.js 1 => [email protected] I

Nacho Anaya 36 May 5, 2022
Vue V2 directive to react on clicks outside an element.

v-click-outside-x Vue V2 directive to react on clicks outside an element. Install $ npm install --save v-click-outside-x $ yarn add v-click-outside-x

Graham Fairweather 86 Aug 27, 2022
VueJS directive to observe changes in DOM use MutationObserver API

vue-mutation-observer VueJS directive to observe changes in DOM use MutationObserver API Install npm install vue-mutation-observer or yarn add vue-mut

null 11 Oct 22, 2020
Vue Directive to move the DOM without losing all the VM data, event, etc. it's Adopted from https://github.com/rhyzx/vue-transfer-dom

Vue Move DOM Vue Directive to move the DOM without losing all the VM data, event, etc. it's Adopted from vue-transfer-dom just Simplify it and change

Naufal Rabbani 7 Jun 5, 2021