q-resize-observer inside q-page

[eumelzocker]

q-resize-observer is not useful inside q-page.
I tried this to detect changes of the page height:

  <q-layout>
    <q-header>
      <!-- ... -->
    </q-header>
    <q-page-container>
      <q-page ref="page">
        <q-resize-observer @resize="onResize" />
        <!-- some nested component containing q-scroll-area -->
      </q-page>
    </q-page-container>
  </q-layout>

It works sometimes but it's unreliable when reducing the page height.
Technically, this is correct as the size does not always change, but only the visible area.

I found a workaround but it's a pain in the ass.

let observer;

onMounted(() => {
  observer = new MutationObserver((mutations) => {
    mutations.forEach((mutation) => {
      if (mutation.type === 'attributes' && mutation.attributeName === 'style') {
        const minHeight = window.getComputedStyle(page).minHeight;
        console.log('New min-height:', minHeight);
        // store minHeight with pinia to use in my component
      }
    });
  });
  observer.observe(page, {
    attributes: true,
    attributeFilter: ['style']
  });
})

onBeforeUnmount(() => {
  if (observer) {
    observer.disconnect();
    observer = null;
  }
})

Is there any smarter solution for my problem?

[yusufkandemir]

const page = useTemplateRef('page') // just ref() works too
const pageMinHeight = computed(() => page.value?.$el.style.minHeight)

[eumelzocker]

Thanks for your fast answer but the computed value is not reactive (does not change when Quasar alters the min-height style of the page).

I also tried to set up a watcher on the style attribute, but that's not possible because q-page isn't mounted at that time.

Maybe I should try q-layout@resize ...?

[yusufkandemir]

Yes, you can give q-layout@resize a try. It's based on a q-resize-observer inside the correct spot. So, if it's structure works for you, it should solve your problem.