stack/v1/packages/mosaic/framework/skills/vueuse-functions/references/useMutationObserver.md

category

category
Elements

useMutationObserver

Watch for changes being made to the DOM tree. MutationObserver MDN

Usage

<script setup lang="ts">
import { useMutationObserver } from '@vueuse/core';
import { ref, useTemplateRef } from 'vue';

const el = useTemplateRef('el');
const messages = ref([]);

useMutationObserver(
  el,
  (mutations) => {
    if (mutations[0]) messages.value.push(mutations[0].attributeName);
  },
  {
    attributes: true,
  },
);
</script>

<template>
  <div ref="el">Hello VueUse</div>
</template>

Type Declarations

export interface UseMutationObserverOptions extends MutationObserverInit, ConfigurableWindow {}
/**
 * Watch for changes being made to the DOM tree.
 *
 * @see https://vueuse.org/useMutationObserver
 * @see https://developer.mozilla.org/en-US/docs/Web/API/MutationObserver MutationObserver MDN
 * @param target
 * @param callback
 * @param options
 */
export declare function useMutationObserver(
  target: MaybeComputedElementRef | MaybeComputedElementRef[] | MaybeRefOrGetter<MaybeElement[]>,
  callback: MutationCallback,
  options?: UseMutationObserverOptions,
): {
  isSupported: ComputedRef<boolean>;
  stop: () => void;
  takeRecords: () => MutationRecord[] | undefined;
};
export type UseMutationObserverReturn = ReturnType<typeof useMutationObserver>;