NuxtLayout breaks v-model behaviour when used after any async statement

[sharifzadesina]

Environment

• Operating System: Linux
• Node Version: v18.18.0
• Nuxt Version: 3.11.2
• CLI Version: 3.11.1
• Nitro Version: 2.9.6
• Package Manager: npm@10.2.3
• Builder: -
• User Config: devtools, modules
• Runtime Modules: @nuxt/content@2.12.1
• Build Modules: -

Reproduction

Checkout the project on Stackblitz:
https://stackblitz.com/edit/nuxt-starter-cjpm2f?file=app.vue
The input value should be 2, but it remains 1 if you remove the async statement or NuxtLayout, everything will be fixed.

Describe the bug

It seems something happens in NuxtLayout that breaks v-model behavior before mount and prevent it from updating the value of input. if you don't use any async statement or NuxtLayout, everything works fine.

Additional context

If you don't use v-model and use :value and @input instead or just print the variable value, everything works file, only v-model is broken.

Logs

No response

[stackblitz]

Start a new pull request in StackBlitz Codeflow.

• nuxt-starter-cjpm2f (Open reproduction)

[manniL]

FYI: This does not happen when awaiting a setTimeout Promise like this:

<template>
  <input v-model="a" />
  <p>{{ a }}</p>
</template>

<script setup lang="ts">
const a = ref(1);

const myFunc = async () => {
  await new Promise(r => setTimeout(r, 1000));
  a.value = 2;
};

onBeforeMount(() => {
  myFunc();
});
</script>

[sharifzadesina]

@manniL I don't know about timeouts, but when I have real AJAX calls in my application it happens.
I just tried to make example simple as possible so I used nextTick()

[huang-julien]

hey 👋

onBeforeMount is treeshaken in ssr so myFunc won't be called. You're probably looking for the useAsyncData() composable ?

Here Alex's video about it
https://www.youtube.com/watch?v=0X-aOpSGabA

I can't reproduce the v-model issue

[sharifzadesina]

@huang-julien Bro this bug has nothing to do with SSR, onBeforeMount should be called on client side and it should update the input value. As you can see on the provided project, only the input value is not changed and the variable itself is changed and printed value is valid.
Edit: The reason you were not able to reproduce the issue was because I was experimenting with async statement, you can check the project now you will see what happens.

[manniL]

@sharifzadesina can you repro it with something else than nextTick?

[sharifzadesina]

@manniL No, but in my own app, fetch calls also cause problems.

[manniL]

Then please provide a reproduction without nextTick ☺️

[github-actions]

Would you be able to provide a reproduction? 🙏

More info

Why do I need to provide a reproduction?

Reproductions make it possible for us to triage and fix issues quickly with a relatively small team. It helps us discover the source of the problem, and also can reveal assumptions you or we might be making.

What will happen?

If you've provided a reproduction, we'll remove the label and try to reproduce the issue. If we can, we'll mark it as a bug and prioritize it based on its severity and how many people we think it might affect.

If needs reproduction labeled issues don't receive any substantial activity (e.g., new comments featuring a reproduction link), we'll close them. That's not because we don't care! At any point, feel free to comment with a reproduction and we'll reopen it.

How can I create a reproduction?

We have a couple of templates for starting with a minimal reproduction:

👉 https://stackblitz.com/github/nuxt/starter/tree/v3-stackblitz
👉 https://codesandbox.io/s/github/nuxt/starter/v3-codesandbox

A public GitHub repository is also perfect. 👌

Please ensure that the reproduction is as minimal as possible. See more details in our guide.

You might also find these other articles interesting and/or helpful:

• The Importance of Reproductions
• How to Generate a Minimal, Complete, and Verifiable Example

[github-actions]

This issue was closed because it was open for 7 days without a reproduction.