Nuxt.js: Wrong layoutName

[usb248]

Version

v2.13.0

Reproduction link

https://u1rpq.sse.codesandbox.io/

Steps to reproduce

Go to an error page (ex: https://u1rpq.sse.codesandbox.io/not-found), open your debug console, click on home link, see wrong layout. Do hard refresh (F5), layoutName is good now (SSR ok)...
It can be related to https://github.com/nuxt/nuxt.js/issues/5703, https://github.com/nuxt/nuxt.js/issues/7554....

What is expected ?

layoutName should be : front

What is actually happening?

layoutName value is: default, it displays default layout instead of front layout

Additional comments?

I use layoutName in order to stylize, it's a very big issue which break all my app.....
I'm missing something ?

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

[syropian]

I'm also running into this, client-side renders only seem to render the default layout, while server-side renders seem to correctly render whatever is passed to the layout option.

[usb248]

layoutName is always default even if default.vue layout doesn't exist. It's totally buggy...

[fikrivoxel]

i think its version v2.13.0 make bug layout, maybe downgrade or wait for fix bug

[galvez]

@usb248 thanks for the report, I'm looking into it.

[usb248]

Thx @galvez , I look forward to the fix.

[taras1313]

Hey, here is my temporal workaround to handle this issue.
In your error.vue layout put

<script>
  export default {
    name: 'error',
    layout: 'empty',
    beforeDestroy() {
      $nuxt.setLayout('default') // this line is basically the 'fix'
    },
  };
</script>

Agree, that's not a great solution, but if this bug is critical for you it should work fine until it's fixed.

https://codesandbox.io/s/prod-forest-319td?file=/layouts/error.vue

[Omarillo]

yes, i have the same issue

[jackiboy]

Same issue with me. The initial server side render uses the correct layout but once you start navigating through the app with client side routing it renders the default layout.
I have rolled back to v2.12.2 for now.

[Atinux]

Let's closed when v2.13.1 lands, I am really sorry about this regression 😬

[gnuletik]

Here's another flavour of @taras1313's workaround:
It's based on nuxt-composition-api and it handles destination page with another layout name than 'default'.

import {
  defineComponent,
  useContext,
  getCurrentInstance
} from 'nuxt-composition-api'

export default defineComponent ({
  layout: 'fullpage',
  props: {
    error: {
      type: Object,
      required: true
    }
  },
  setup () {
    const { route } = useContext()

    // FIXME: https://github.com/nuxt/nuxt.js/issues/7567
    onBeforeUnmount(() => {
      const vm = getCurrentInstance()
      if (!vm) {
        return
      }
      const matched = route.value.matched[0]
      vm.$nuxt.setLayout((matched?.components?.default as any)?.options?.layout || 'default')
    })
  }
})

Hope it helps until v2.13.1 gets released.

Thanks for the fix @Atinux !

[pi0]

Hi! This should be fixed with v2.13.1.

[jonian]

Hi @pi0, this issue is still present in 2.13.1. Using the workaround from @gnuletik or @taras1313 is not optimal as the layout change is visible (page components are loaded before the layout change). Is there a better workaround?

[usb248]

There is someone of core team able to fix/understand this issue please ... ? :worried:

[Atinux]

@usb248 you codesandbox is working now with the latest version: https://u1rpq.sse.codesandbox.io/not-found and then navigate to home page

I am not sure to understand what's the issue now 🤔

[Atinux]

@jonian could you provide a reproduction please?

It works perfectly for us: https://codesandbox.io/s/frosty-fog-homlr

[jonian]

@Atinux, reproduction at https://codesandbox.io/s/fervent-hoover-bq5nq. I can also reproduce this with a new app locally. Home and About pages use the default layout. Error page/layout uses the empty layout.

What fixes the issue for me is replacing https://github.com/nuxt/nuxt.js/blob/dev/packages/vue-app/template/client.js#L612

if (this._hadError) {
  Vue.nextTick(() => {
    this.setLayout(layout)
  })
} else {
  this.setLayout(layout)
}

[jonian]

@Atinux, when error page uses the default layout and Home, About use the front layout, it works as expected. Reproduction at https://codesandbox.io/s/pensive-glade-hkpfl. So it looks that the issue occurs when assigning a layout to the error page.

[piecedata]

I do also have like @jonian

Homepage is using orange layout, error page is using empty layout. When I hit go to homepage link from error page the layout is not updated to orange but remains the empty layout, but must be orange as set for homepage. Im using nuxt 2.13.1

If I do not assign a layout to the error page, everything works as expected.

[pi0]

Bug still exists. The issue is that setLayout from App:render is being called for error layout when navigating from404 to / (last console log)

We are working to find a fix :)

[pi0]

Hi. This should be (finally) fixed with v2.13.2 apologizes for all inconveniences due to this bug.

[usb248]

Thanks, it's ok for me

[jonian]

@pi0, @Atinux, PR #7606 causes wrong error layout when there are errors after the route is mounted (eg. 500 errors).

Reproduction at https://codesandbox.io/s/affectionate-johnson-1bzfy, error pages should use the empty layout, all other pages should use the default layout.