Nuxt.js: Components rendering issues in the Layout

[CoolGoose]

Version

v1.4.2

Reproduction link

https://github.com/CoolGoose/nuxtlayoutdebug

Steps to reproduce

I've added a repo that contains the code.
I've used vuex-flash as an example, but it happened with a custom component as well.

What is expected ?

Rendering the message in the layout as well

What is actually happening?

It only renders in the page

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

[manniL]

Result after cloning and running:

Looks right. Could you provide info what you exactly expected? :thinking:

[CoolGoose]

@manniL

Sorry, i dropped the ball and forgot the crucial thing.

1. You need to go to /second
2. You will be redirected back to the homepage

Here's how it shows for me (note my awesome graphic skills)

[manniL]

After going to /second I see this. Looks still right :thinking:

Could you try out the latest nuxt-edge with the reproduction repo? I think it'll work out :)

[CoolGoose]

@manniL notice it says some message 123 321 only on the inner component, not the big layout

[manniL]

@CoolGoose Ah! Now it got it :see_no_evil:

[manniL]

Can reproduce this in nuxt-edge, even if not directly accessing /second by typing the URL in.

Looks like the layout doesn't reflect changes of the Vuex store as long as the state isn't displayed. :thinking:

[stale[bot]]

This issue has been automatically marked as stale because it has not had recent activity. It will be closed if no further activity occurs.

[CoolGoose]

Bumping for activity (and will try to re reproduce on 2.0)

[manniL]

@CoolGoose I'd suggest https://template.nuxtjs.org/ for that ☺️

[CoolGoose]

@manniL https://codesandbox.io/s/0qw4vx239n?initialpath=%2Fabout&module=%2Fpages%2Fabout.vue
go to /about and then you'll notice the error still exists :D (renders fine in the page, not the layout)

[manniL]

@CoolGoose Could you try to reproduce it without that library?

[CoolGoose]

@manniL it seems that committing and displaying manually works. will try a bit later today to see if somehow vuex in single store mode with namespaced calls makes it weird.

[CoolGoose]

@manniL finally, I could reproduce it cleanly.
Please go to https://codesandbox.io/s/0qw4vx239n and click about.

[manniL]

@CoolGoose it seems like wrapping it in a computed property will work fine :thinking: (https://codesandbox.io/s/ykxr52rr8x)

[CoolGoose]

@manniL
From my testing simple keys with integers work fine even without computed. The problem is for objects.
Please see https://codesandbox.io/s/r019y31qrm and notice the { "info": [ "error" ] } message (also made it a computed in that component, but still no luck)

[manniL]

@CoolGoose Please check my CSB :relaxed: It works fine with objects as well

[manniL]

@CoolGoose Any update? Does it work for you as well now?

[CoolGoose]

@manniL I apologize for the delay, was a crazy last week and this weekend we went to an e-commerce connference. Will test these days and get back

[stale[bot]]

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.