Static GitHub Issues

[819] layout hot load bugs. (old and new CSS/template mixed together)

prev: Auth Guard issue (middleware)
next: yarn run generate, error:Cannot read property 'split' of undefined
<h2> What's the Problem </h2> 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)
<h2> How to reproduce</h2>

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

  1. Create test_layout.vue in layouts dir, mine is below: nuxt-bug
  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.
<h3> What happened </h3> 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.
<h3> Details </h3> 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:

<pre> layout: 'test_layout', components: { Logo } </pre>

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.

<!--cmty--><!--cmty_prevent_hook--><div align="right"><sub><em>This question is available on <a href="https://nuxtjs.cmty.io">Nuxt.js</a> community (<a href="https://nuxtjs.cmty.io/nuxt/nuxt.js/issues/c702">#c702</a>)</em></sub></div>