Mounted twice when layout change

[usb248]

Version

v2.6.2

Reproduction link

https://codesandbox.io/s/wn7j570y85

Steps to reproduce

Simply click on button named "Mounted triggered twice, see console" and see in console.
(reproducable only with css:false for transition)

What is expected ?

mounted once

What is actually happening?

mounted twice

Additional comments?

The bug is still present on last release 2.7.1
It can be fixed quickly ? it's really a brake on client-side performance.
(Related : #5616)

_{This bug report is available on Nuxt community (#c9188)}

[Austio]

I pulled this down locally and am only seeing a single mount. Maybe this is an issue with code sand box?

[usb248]

no, you forgot something. The next page must have an other layout and css:false for transition (navigation on client side). I have the same bug locally.
I have to make a video to prove it to you?

[usb248]

Someone is alive ? :)

[ricardogobbosouza]

Hi @usb248
This still happens in version 2.8.0
The problem is when transition: {css: false} it's defined

[usb248]

Any core team feels concerned ?

[eusahn]

It's not just transition, still mounts twice on this.$router.push

[amritk]

This still seems to be an issue when transitioning from one layout to another, could we get a re-open?

nuxt version 2.9.2

[swapneelvivekdesaithoughtworks]

Happening with Nuxt version 2.10.0 as well. I am using nuxt generate. It only happens in the production build.

[manniL]

@amritk @swapneelvivekdesaithoughtworks with the same reproduction from above? If not, please provide one.

[amritk]

Hit the link and watch the console
https://codesandbox.io/s/nuxt-vuetify-k7yv9

[stale]

Thanks for your contribution to Nuxt.js!
This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.
If you would like this issue to remain open:

1. Verify that you can still reproduce the issue in the latest version of nuxt-edge
2. Comment the steps to reproduce it

Issues that are labeled as pending will not be automatically marked as stale.

[amritk]

It is still an issue:

https://codesandbox.io/s/nuxt-vuetify-k7yv9

[marcbelletre]

I can confirm this does still happen with Nuxt 2.10.2 when page transitions are enabled.

I used to have these objects in my Nuxt config file in order to enable transitions:

layoutTransition: {
    name: 'layout',
    mode: ''
},

pageTransition: {
    name: 'page',
    mode: ''
}

I had to remove both of them to prevent pages components to be mounted/created twice.

[MohitTilwani15]

As a temporary fix, I wrapped my code inside mounted in if condition. The condition is just to check if the layout name is the one I am expecting.

if (this.$nuxt.layoutName === 'myLayout') {
  ...
}

[mrdj07]

Don't know if this can help, but I managed to find my problem by putting breakpoints inside the fetch methode to realize the page was being loaded twice, by two different methods.

We had an el-menu made by Element-UI, that had inside of it, nuxt-links, so the route was loaded twice simultaneously.

I realize this was a coding error but this might help anyone looking for awnsers. Try to trace how the route gets changed !

[dsktschy]

My temporary workaround.

~/plugins/inject-layout.js

export default (context, inject) => {
  inject('layout', {

    // Layout name and route.name of pages that are not dafault layout
    map: {
      'one-column': ['signup', 'signin'],
      'some-other-layout': ['some-route-name']
    },

    // Property that represents correct layout name of current page
    current: 'default'
  })
}

nuxt.config.js

export default {
  plugins: ['~/plugins/inject-layout.js']
}

~/mixins/layout.js

export default {

  // Set and keep correct layout name of current page
  layout({ app, route }) {
    let layoutName = 'default'
    for (const [key, value] of Object.entries(app.$layout.map)) {
      if (value.includes(route.name)) layoutName = key
    }
    app.$layout.current = layoutName
    return layoutName
  },
  
  data() {
    return {
      // True while duplicated lifecycle hooks are running
      incorrectLayout: this.$nuxt.layoutName !== this.$layout.current
    }
  }
}

~/pages/**/*.vue

import layout from '~/mixins/layout'

export default {

  // Layout setting
  mixins: [layout],

  // Hooks will be executed twice, but
  mounted() {
    // Return immediately if duplicated runs
    if (this.incorrectLayout) return
    console.log('This is only displayed once.')
  }
}

[galaxyblur]

This is still occurring for me as of today, in nuxt@2.11.0. My Vue browser extension reports that in the default layout, there are two views and thus everything occurs twice. This is in dev mode.

While running in dev mode, if I remove the element from layouts/default.vue, the page structure is cleared. Adding it back, one view appears (according to the Vue browser extension). After that, refreshing the page results in two views, indefinitely.

Given that this is happening within Nuxt, I don't know of any workarounds or logical statements that can prevent it.

[gerasimvol]

similar to #6961

[nickgayo12]

I have the same issue with twice mounted on nuxt, what I did is this.

<client-only> <nuxt /> // On your layout <client-only>

hope it helps.

[tsarrB]

I had something similar
the problem was in the incorrectly registered plugin

[gerasimvol]

@tsarrB can you provide any details? examples?

[Ghustavh97]

My issue was having a key like this over the components.

<div :key="$helper.uuid()">
  <ComponentTest></ComponentTest>
</div>

[nkawarewebuy]

Hi, is there any update on this? I can still reproduce this in Nuxt version 2.15.7

[Solero007]

Any ideas? Having the same issue

[safiullahsarhandi]

I have the same issue with twice mounted on nuxt, what I did is this.

<client-only> <nuxt /> // On your layout <client-only>

hope it helps.

this works for me

[stouch]

This helped me :

Solution: After plucking some hair, I found that simply wrapping <Nuxt /> in any element fixed the issue. No idea why, but it works.

<template>
  <div>
    <TheHeader />
    <div>
        <Nuxt />
    <div>
    <TheFooter />
  </div>
</template>

But I don't understand why this ticket is "closed" ? The problem is still happening in 2.15.8 .

[simeon-petrov-5]

I can also confirm this as of 2.15.7 SSR Mode (from the previous comment 2.15.8 isn't any different). What helped was wrapping <Nuxt /> in a div (I also have a header and a footer inside my layout).

I have page transitions still enabled (transition: 'page-transition') so I guess it's not only tied to the transitions.

Solution: After plucking some hair, I found that simply wrapping <Nuxt /> in any element fixed the issue. No idea why, but it works.

<template>
  <div>
    <TheHeader />
    <div>
        <Nuxt />
    <div>
    <TheFooter />
  </div>
</template>

[kamaludin21]

Same issue here

[trandaison]

Why close this issue? It's still happen on 2.15.7

[trandaison]

In my case, I have a component TheNavbar in the layout file.

<template>
  <div>
    <div class="default-layout">
      <slot>
        <Nuxt />
      </slot>
    </div>
    <TheNavbar />
  </div>
</template>

In this component, I have a computed that mapped from vuex store. And the navbar will render links dynamically based on that computed.

I have to put that template code that uses the vuex state within <client-only> component.

The state from my vuex is set when a client side plugin executing. If it was set from the server side this will not happen, I guess.

[ahmetcankucukkor]

I am having this problem in version 2.14.3. When I get data from the cookie, the components are mounted twice.

I have a link list in footer. I need to show one of these links when language is 'tr' only.

<li v-if="checkLanguage() === 'tr'">
    <a
        :href="imageURL + 'files/kvkkApply.docx'"
        download
        rel="nofollow">
        KVKK Başvuru Formu
    </a>
</li>

In checkLanguage(), I am getting language data from Cookie.

checkLanguage () {
      return Cookie.get("i18n_redirected");
}

I don't get any errors while using them, but the components are mounted twice.
If I do not use the cookie in the checklanguage function and do it like this, the components do not mount 2 times

checkLanguage () {
      return 'tr'    //Cookie.get("i18n_redirected");
}

[brunodeangelis]

I am having this problem in version 2.14.3. When I get data from the cookie, the components are mounted twice.

I have a link list in footer. I need to show one of these links when language is 'tr' only.

<li v-if="checkLanguage() === 'tr'">
    <a
        :href="imageURL + 'files/kvkkApply.docx'"
        download
        rel="nofollow">
        KVKK Başvuru Formu
    </a>
</li>

In checkLanguage(), I am getting language data from Cookie.

checkLanguage () {
      return Cookie.get("i18n_redirected");
}

I don't get any errors while using them, but the components are mounted twice. If I do not use the cookie in the checklanguage function and do it like this, the components do not mount 2 times

checkLanguage () {
      return 'tr'    //Cookie.get("i18n_redirected");
}

Have you tried using v-show instead of v-if?

[ahmetcankucukkor]

I am having this problem in version 2.14.3. When I get data from the cookie, the components are mounted twice.
I have a link list in footer. I need to show one of these links when language is 'tr' only.

<li v-if="checkLanguage() === 'tr'">
    <a
        :href="imageURL + 'files/kvkkApply.docx'"
        download
        rel="nofollow">
        KVKK Başvuru Formu
    </a>
</li>

In checkLanguage(), I am getting language data from Cookie.

checkLanguage () {
      return Cookie.get("i18n_redirected");
}

I don't get any errors while using them, but the components are mounted twice. If I do not use the cookie in the checklanguage function and do it like this, the components do not mount 2 times

checkLanguage () {
      return 'tr'    //Cookie.get("i18n_redirected");
}

Have you tried using v-show instead of v-if?

No, actually I solved my problem with computed variable.
But I just tried the above case with v-show. When I use v-show instead of v-if, it does not mount twice. Thanks.

[koos30]

Had the same issue! This thread was a huge help. For me the problem was having multiple elements directly in the page templates.

What I had before (triggered double mount):

<template>
    <div v-if="condition">First element</div>
    <div v-else>Second element</div>
</template>

Fixed (single mount):

<template>
    <div>
        <div v-if="condition">First element</div>
        <div v-else>Second element</div>
    </div>
</template>

I was under the impression you are allowed to have multiple elements in the page template as long as only 1 rendered. Apparently not 🤷‍♂️ Hope this helps anyone

[wmcmurray]

In my case, one page had an asyncData that was fetching some data from an API and adding that data to the store. But it WAS NOT RETURNING THAT DATA, the page was grabbing that data from the store instead (through a computed even).

Components stopped being mounted twice after returning that data directly from the asyncData method ! 🎉 (without going through the store)

[ChicK00o]

none of the above highlighted solution worked for me on nuxt: 2.15.8

[Kolobok12309]

And problem with same root, layout and page not sync changed. Page1 with layout1 would render in layout2, and after it in layout 1

Some debug log for this problem.
await this.loadLayout(layout) from loadLayoutForNextPage executed after all afterEach and page render in old layout, and after tick(Promise.resolve) layout changed to actual and page mounted second times

load unresolved layout landing-v3
end load layout landing-v3
request loaded layout landing-v3
stud mounted
end load of setLayoutForNextPage landing-v3
stud mounted

[vanminhquangtri]

It's late but I hope this would be useful for some one.
I my case, the page mounted twice due to the build property in nuxt.config.js. If I remove build, page will only mount once.
Good luck.

[trandaison]

@vanminhquangtri what do you have in the build property?
Some project have to configure the build extend or transpile modules, can't be removed easily just like that.

[vanminhquangtri]

@trandaison usually because of the splitChunks property inside the build property. Just try to remove the build property to check whether the error is caused by it.

[Dmytro-Tihunov]

I faced with the same problem :) are there any ideas ? I have build => transpile that i need ) if I remove it works well

[qianzhaoy]

I solved this problem by overriding context.app.data in the client-side plugins

export default function (Vue, context) {
  const originData = context.app.data;

  context.app.data = function () {
    const data = originData.call(this);
    return {
      ...data,
      layout: 'div',
    };
  };
}

[Kolobok12309]

I solved this problem by overriding context.app.data in the client-side plugins

export default function (Vue, context) {
  const originData = context.app.data;

  context.app.data = function () {
    const data = originData.call(this);
    return {
      ...data,
      layout: 'div',
    };
  };
}

Can you say more about your fix?

[Anymfah]

This helped me :

Solution: After plucking some hair, I found that simply wrapping <Nuxt /> in any element fixed the issue. No idea why, but it works.

<template>
  <div>
    <TheHeader />
    <div>
        <Nuxt />
    <div>
    <TheFooter />
  </div>
</template>

But I don't understand why this ticket is "closed" ? The problem is still happening in 2.15.8 .

Thank you so much

[damyco]

This was a real head scratcher for us. This workaround worked though, thanks.

<div>
  <Nuxt/>
<div>

[leandrosilvaferreira]

@Atinux I can confirm as others are saying.

This double created/mounted bug exists when build.splitChunks.layout = true.

No other suggestions here resolved the bug, but setting that Nuxt config to false instantly resolved it (SPA mode)

THIS SOLVE IN MY CASE, splitChunks.layouts = false fix the problem.

[kumarsks619]

build.splitChunks.layout = false in nuxt.config file fixed it for me and none of the other solutions worked.
My nuxt version is 2.15.4
Hope this will help someone else!