Nuxt•12mo ago

pages onMounted hook being called twice when switching layouts in app.vue

Hello everyone,
I am working on my first web app using Nuxt 3. In my app.vue I am using a computed property to determine the layout that will be bound to NuxtPage name property.

I discovered that when I navigate from 1 page using default layout to another page using custom layout the onMounted hook is called twice.

I made a simple reproduction here: https://stackblitz.com/~/github.com/mikechao/mount-twice
Open the include browser in a separate tab, open the console and click the 'To custom' link

Is this the expected behavior? Or am I doing something incorrectly?

nuxi info output:
Nuxt project info: 10:28:45 AM

------------------------------

Operating System: Linux
Node Version: v18.20.3
Nuxt Version: 3.15.0
CLI Version: 3.17.2
Nitro Version: -
Package Manager: pnpm@8.15.6
Builder: -
User Config: default
Runtime Modules: -
Build Modules: -
------------------------------
Thanks

kapa.ai•1/3/25, 6:30 PM

Hi @Mike Chao. I'm kapa.ai, your friendly support bot. I will try to answer your question by searching through the knowledge base. :wave:

kapa.ai•1/3/25, 6:30 PM

----------------------
Based on the information provided in the knowledge sources, it appears that the behavior you're experiencing is a known issue in Nuxt 3. The onMounted hook being called twice when switching layouts is not the expected behavior, but it has been reported and discussed in several GitHub issues.

This issue seems to be related to how Nuxt handles layout transitions and component mounting. Here are some relevant points from the knowledge sources:

Github Issue #30200 describes a similar problem where the mounted hook is triggered twice under certain conditions, including when using custom layouts and lazy-loaded components.
Github Issue #13471 mentions that the onMounted hook can run before the DOM is available when navigating between routes, which could be related to your issue.
Github Issue #26258 discusses a problem with pages being rendered twice when using nested routes with async components, which might be similar to your situation.

While there isn't a definitive solution provided in the knowledge sources, there are some workarounds you can try:

Disable transitions: You can try disabling page transitions or layout transitions to see if it resolves the issue. This can be done in your
```
nuxt.config.ts
```
```
nuxt.config.ts
```
file:

export default defineNuxtConfig({
  app: {
    pageTransition: false,
    layoutTransition: false
  }
})

export default defineNuxtConfig({
  app: {
    pageTransition: false,
    layoutTransition: false
  }
})

Use a blank layout: As suggested in this Stack Overflow answer, you can create a blank layout that just displays the <slot /><slot /> with no other elements. This might help mitigate the issue while still allowing you to use different layouts.

kapa.ai•1/3/25, 6:30 PM

Use <Suspense><Suspense>: One of the comments in the GitHub issues suggests using the <Suspense><Suspense> component as a temporary solution for the page transition issue.
Check for hydration: You can use the isHydratingisHydrating property from useNuxtApp()useNuxtApp() to check if the app is currently hydrating, which might help you avoid running certain code twice. Here's an example from the Nuxt documentation:

const nuxtApp = useNuxtApp()
if (import.meta.client && !nuxtApp.isHydrating) {
  // Run code only once after hydration
}

const nuxtApp = useNuxtApp()
if (import.meta.client && !nuxtApp.isHydrating) {
  // Run code only once after hydration
}

It's worth noting that this issue has been acknowledged by the Nuxt team and there are ongoing efforts to address it. You might want to keep an eye on the GitHub issues for updates or consider upgrading to the latest version of Nuxt when available, as fixes for this type of behavior are often included in newer releases.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•1/3/25, 6:30 PM

@1128044702474707025 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Mike ChaoOP•1/3/25, 6:46 PM

@kapa.ai Thanks, but I tried your suggestions and I still see the onMounted hook being called twice

kapa.ai•1/3/25, 6:46 PM

Let me check the knowledge base for you again. One moment! :books:

kapa.ai•1/3/25, 6:46 PM

----------------------
I apologize that the suggestions didn't resolve the issue you're experiencing. Based on the knowledge sources provided and your feedback, it seems that this problem is more persistent than initially thought. Let's explore this further:

Ongoing Issue: The behavior you're observing appears to be a known and ongoing issue in Nuxt 3. As mentioned in Github Issue #30200, the mounted hook being triggered twice under certain conditions (including layout changes) is a reported problem.
Potential Root Cause: The issue might be related to how Nuxt handles layout changes and component lifecycle hooks during navigation. This is particularly evident when switching between different layouts, as in your case.
Limited Workarounds: Unfortunately, the knowledge sources don't provide a definitive solution that works in all cases. The fact that the suggestions didn't work for you underscores the complexity of this issue.
Recent Developments: There have been some recent attempts to address similar issues. For instance, this pull request aimed to fix a related problem by checking for layout changes after the next tick. However, it's not clear if this fully resolves the issue you're experiencing.

Given that the problem persists, here are a few additional suggestions:

Report the Issue: Consider reporting your specific case on the Nuxt GitHub repository. Include your reproduction link and details about your setup. This can help the Nuxt team to further investigate and potentially provide a more targeted solution.
Alternative Approach: Instead of relying on the
```
onMounted
```
```
onMounted
```
hook, you could try using the onBeforeMountonBeforeMount or onActivatedonActivated hooks to see if they behave differently in your scenario.

kapa.ai•1/3/25, 6:46 PM

Conditional Execution: Implement a flag to ensure your mounted logic only runs once, regardless of how many times the hook is called:

   let isMounted = false;

   onMounted(() => {
     if (!isMounted) {
       // Your logic here
       isMounted = true;
     }
   });

   let isMounted = false;

   onMounted(() => {
     if (!isMounted) {
       // Your logic here
       isMounted = true;
     }
   });

Stay Updated: Keep your Nuxt version up to date, as fixes for these types of issues are often included in newer releases.

I apologize that I couldn't provide a definitive solution. This seems to be a complex issue that the Nuxt team is still working on. If you need further assistance, it might be helpful to engage directly with the Nuxt community through their GitHub issues or discussion forums.
----------------------
Note: you can ask me a follow up question by @ mentioning me again :speech_balloon:
----------------------

kapa.ai•1/3/25, 6:46 PM

@1128044702474707025 Kapa.ai is still learning and improving, please let me know how I did by reacting below.

Mike ChaoOP•1/4/25, 7:01 PM

Mike ChaoOP•1/4/25, 7:03 PM

Thanks @L422Y , I figured I was doing something incorrectly, wouldn't have thought to use middleware to set the layout

pages onMounted hook being called twice when switching layouts in app.vue

Similar Threads

Similar Threads

Similar Threads