@stackoverfloweth/vue-compositions/dist/types/src/useElementWidth/useElementWidth.js

A collection of reusable vue compositions.

import { ref, watchEffect } from 'vue';
import { useResizeObserver } from '../useResizeObserver/useResizeObserver';
/**
 * @deprecated use useElementRect instead
 */
export function useElementWidth(element) {
    const elementRef = ref(element);
    const widthInPixels = ref(0);
    const callback = function ([entry]) {
        const { width } = entry.target.getBoundingClientRect();
        widthInPixels.value = width;
    };
    const observer = useResizeObserver(callback);
    watchEffect(() => {
        if (elementRef.value) {
            const { width } = elementRef.value.getBoundingClientRect();
            widthInPixels.value = width;
            observer.disconnect();
            observer.observe(elementRef);
        }
    });
    return widthInPixels;
}
//# sourceMappingURL=useElementWidth.js.map