Passing element to composable function in Vue composition API?

Question

I'll preface this question by saying I'm very new to the composition API so I'm still trying to figure out the best practices. I'm writing a useResizeObserver composable function using Vue's composition API in order to track dimension changes on a target element. Because I have to wait for the element to be mounted, I can't call my composable from top-level in the setup() method on my component as most examples show, but have to call it from onMounted() instead, where I have access to my element's ref.

onMounted(async () => {
      elementDimensions.value = useResizeObserver(modalContent.value);
}

This forced me to have another ref that I named elementDimensions actually declared at the top level of the setup() function, which I initialise to null.

setup(props) {
    const elementDimensions = ref(null);
    const modalContent = ref(null);
    ...
}

Here is the useResizeObserver function itself:

export default function useResizeObserver(element) {
  const elementHeight = ref(0);
  const elementWidth = ref(0);

  const resizeObserver = new ResizeObserver(entries => {
    elementHeight.value = entries[0].contentRect.height;
    elementWidth.value = entries[0].contentRect.width;
  });

  if (element) {
    resizeObserver.observe(element);
  }

  onUnmounted(() => {
    resizeObserver.disconnect();
  });

  return { elementHeight, elementWidth };
}

This actually works well to give me what I want but I'm wondering if there's a better way to achieve this. The way things are implemented right now, I end up with "nested" refs, since I end up wrapping elementHeight and elementWidth (which are already refs) into another ref inside the component (elementDimensions). Is there a better recommended way of doing this when you need to pass an element to a composable from onMounted()?

Estus Flask · Accepted Answer · 2022-07-04 13:33:32Z

2

Composition functions are supposed to be used directly in setup, any other uses depend on the implementation and need to be verified.

Refs are basically objects that allow to pass a value by reference rather than by value. One of their uses is to pass a ref early and access when a value is up-to-date.

It should be:

setup(props) {
   const modalContent = ref(null);
   const elementDimensions = useResizeObserver(modalContent);
  ...
}

and

export default function useResizeObserver(element) {
  const elementHeight = ref(0);
  const elementWidth = ref(0);
  let resizeObserver;

  onMounted(() => {
    if (element.value) {
      resizeObserver = new ResizeObserver(...);
      resizeObserver.observe(element.value);
    }
  }

  onUnmounted(() => {
    if (resizeObserver)
      resizeObserver.disconnect();
  });

  return { elementHeight, elementWidth };
}

answered Jul 4, 2022 at 13:33

Estus Flask

226k79 gold badges478 silver badges620 bronze badges

Sign up to request clarification or add additional context in comments.

1 Comment

LiteralMetaphore Over a year ago

Exactly what I was trying to achieve, thank you! My issue initially while trying an implementation similar to this was that I was passing modalContent.value to the composable instead of the entire ref wrapping it, losing reactivity and being stuck with the initial value. This makes more sense.

Collectives™ on Stack Overflow

Passing element to composable function in Vue composition API?

1 Answer 1

1 Comment

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

1 Comment

Your Answer

Sign up or log in

Post as a guest

Related