onMounted hook running before DOM is available

Environment

• Operating System: Darwin
• Node Version: v17.3.1
• Nuxt Version: 3.0.0-27447229.20f3171
• Package Manager: yarn@1.22.17
• Bundler: Vite
• User Config: vite, build, ssr
• Runtime Modules: -
• Build Modules: -

Reproduction

Not needed. The Bug is very clear

Describe the bug

The screenshot below says it all. On first load (refresh) everything is fine and I’m able to run querySelector and access the DOM just fine. However if I navigate to a different route then come back I get null.

<template>
  <div class="TheAdvantages">
    <ul>
      <li class="first" @click="$router.push('')"> I'm first </li>
    </ul>
  </div>
</template>

<script setup lang="ts">
onMounted(() => {
  console.log('onMonuted Hook:')

  console.log(
    "document.querySelector('.first'): ",
    document.querySelector('.first')
  )

  setTimeout(() => {
    console.log('setTimeout 0ms')
    console.log(
      "document.querySelector('.first'): ",
      document.querySelector('.first')
    )
  }, 0)

})

Additional context

No response

Logs

No response

[fanckush]

Workaround - Disable Transitions

in every page where you care about onMounted running accurately add this inside setup:

definePageMeta({
  pageTransition: false,
}) 

notes:

• I haven’t found a way to globally disable transitions
• I’m not sure on what i’m missing out by disabling the transition

[danielrjames]

I had a similar issue where I could not call .focus() on a template ref in onMounted(). I found that the setTimeout hack does work, but it’s pretty messy, so I’m not really a fan of that.

However, I came across https://github.com/nuxt/framework/issues/2801 and found that if you set <NuxtPage :key="$route.fullPath" /> in you app.vue file, it works as you would expect, so no need to setTimeout, etc.

I have no idea why this would be the solution. @danielroe thoughts?