Home

What’s the Problem

while change the layout in page vue file, there are some bugs in hot-load, old layout and new layout vue file will mixed and combined together. (eg. template in old layout, css style in new layout)

How to reproduce

Platform: OS X 10.12.5
Browser: chrome, firefox, safari

1. Create test_layout.vue in layouts dir, mine is below:
   
2. Insert layout: 'test_layout.vue' in ~pages/index.vue.
3. Do not reload browser, let nuxt server complete the compilation, and browser presents wrong css style.

What happened

It seems like that the server link the new layout vue file when hot-load trigged, while still link the old file, so the css style is combined with both of them.

Details

I created an layout: test_layout.vue (there is some ul>li and h1 { color: red }), then i modified ~pages/index.vue, insert layout: 'test_layout' into export default block and saved this file, but nothing happend, even after trying reloaded browser, layout didn’t changed.

But when I comment this insertion line // layout: 'test_layout' and saved the file, layout changed to test_layout (< li > tags stood there, but < h1 > is not red ).

I restarted the nuxt server, layout loaded correct ( no < li > tags, no red < h1 > ). Uncomment the insertion line:

layout: 'test_layout',  
components: { 
  Logo
}

and then comes < li > tags and red < h1 >, seems correct.

But, the Documentation and Github at bottom are not link style, they are button style. Then I opened chrome inspector, and found the css code in default.vue is in there, the page was mixed with default.vue and text_layout.vue. But at this time, reload the browser will make it correct, and hot-load still mix the new & old layout vue file.

And more, while using default.vue layout with red < h1 > supported in test_layout.vue, when I change the h1 color in test_layout.vue, the h1 color in browser do change, too. But the default.vue layout is in use.