`<Suspense>` + `<Transition>` means mounted() runs too early

[danielroe]

Version

3.2.33

Reproduction link

• stackblitz.com
• SFC Playground

Steps to reproduce

Click the Toggle component button in the reproduction, and observe that a template ref is null rather than defined.

What is expected?

I expect the behaviour with suspense to be the same as the behaviour without suspense.

What is actually happening?

<Suspense> means that the mounted() hook runs before the elements are present in the DOM.

[andysay]

any update?

[michaelpumo]

I also witnessed this issue in Nuxt 3.

On hard load I can retrieve the DOM element via ref and acquire its size using getBoundingClientRect() but when navigating between routes (on the client), the onMounted() appears to run before the DOM is ready and present.

Minimal reproduction:
https://stackblitz.com/edit/nuxt-starter-xssyqg?file=pages%2Findex.vue

This is something to do with transitions.

In my mind, this is a pretty serious bug as at the moment we're having to use setTimeout() hacks in onMounted() in order to ensure the DOM element is retrievable and usable. The timing of this is directly linked to the page transition time.

[richgcook]

It's causing a lot of issues and having to rely on a timeout, which is irregular, is too costly.