nuxt: [Bug] Pages mount twice

In the “spa mode” with a “custom layout” pages will be mounted twice!

In a fresh clone of nuxt.js, I just added this line in nuxt.config.js to use spa mode: mode: 'spa',

then I created a custom layout (‘layouts/custom.vue’) with the exact contents of the default layout (‘layouts/default.vue’), and I used the custom layout in “pages/index.vue”

This bug only exists in SPA mode with a custom layout. But in SSR mode or with the default layout it works fine.

<div align="right">_{This bug report is available on Nuxt.js community (#c1606)}</div>

About this issue

Original URL
State: closed
Created 7 years ago
Reactions: 3
Comments: 15 (4 by maintainers)

Most upvoted comments

Hey @davidpmccormick

It’s actually due to the fact that we wait for fetch to finish before making the transition, and if the second one is faster, it’s due to browser cache.

One solution is to check in your fetch method if you are from client-side, if so, you can avoid to wait for the promise and instead show a loading text 😃

Atinux on Jan 26, 2018

Fixed in next release.

Atinux on Nov 10, 2017

I was able to test for req.headers.referer as this only loads when coming from the client…I guess… I’m doing this in nuxtServerInit btw:

async nuxtServerInit ({ dispatch }, { req }) {

  if (process.server && req.headers.referer) { // <= only fires once =)
    
    const cookies = getCookie.s(req),
          token = cookies.token

    if (token) {
      this.$axios.setToken(token, 'Bearer')
      const api = "http://server:1337/member/verify"
      let { success, message, data: user } = await this.$axios.$get(api)
      if (!success) throw message
      // @todo ~ Error handling )
      await dispatch('user/setUser', user)
    }
  }
}

UPDATE: Ignoring headers.referer was a bad idea. Instead, I realized that it’s triggering the css.map file as a nuxt server call. This seems to work fine for my purposes:

if (process.server && req && req.url && !req.url.match(/\.map$/)) {
  // code...
}

aronanda on Jul 9, 2018

nextTick https://vuejs.org/v2/api/#mounted solved the issue for me. I had an ajax call in mounted and was getting fired twice (no-ssr component), not SPA mode though

RohitRox on Jul 9, 2018