vue-mutation-observer

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

Modifiers

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.