ScriptYouTubePlayer: Weird specific bug related to layouts, transitions and useFetch

[ahmedrangel]

🐛 The bug

Hi, I found this specific bug that occurs using layouts and having pageTransition and layoutTransition enabled in nuxt config. Then, you navigate between layouts and the last page has a video and is fetching something with useFetch, then, you try to play the video. The script loads, but the video doesn't play.

• Steps to reproduce: (It is recommended to open the preview in a new tab)

1. Start the reproduction
2. You must be on the index page /
3. Click Go to Layout
4. Try to play the video
5. The script loads, but the video doesn't play
6. Inspect the console and you must see the error

🛠️ To reproduce

https://stackblitz.com/edit/nuxt-starter-aqvq3n

🌈 Expected behavior

The video in /video should be played after clicking it

ℹ️ Additional context

nuxt: 3.13.2
@nuxt/scripts: 0.9.4

Btw: this error doesn't occur if you enclose the script with <ClientOnly>

[ahmedrangel]

Hello again @harlan-zw ,
I discovered that this error is caused because onMounted is being executed twice. You will notice it by logging something to the console

I also noticed that it is not related to useFetch at all, it is related to awaiting for async functions in general.
It seems that this happens because of a bug with Vue.

Here are some nuxt issues that are facing similar problems
nuxt/nuxt#27442
nuxt/nuxt#27364

I tested some workaround by enclosing the layout </slot> with <Suspense> and I got it working normally.

<!-- Layout -->
<template>
  <div>
    <Suspense>
      <slot />
    </Suspense>
  </div>
</template>

Or just skip the script's SSR with <ClientOnly>

So, that said, it's probably not a problem with @nuxt/scripts