Static GitHub Issues

[2561] Issue with template styles not unmounting on programmatic navigation

prev: Dynamic routes it's not work in Firebase cloud function when refresh page How to fix it?
next: Nuxt deployment, resulting in page 404, how to achieve the correct static deployment?

Hi,

I found a behaviour, that I think could be a bug of some sorts. I'm building quite a large site using Nuxt, and using different CSS frameworks for the client frontend and admin backend: Foundation in the front, Bootstrap in the back. Sort of a CSS framework mullet :) All the frontend pages are using "frontend" layout, everything in the backend is using "admin" layout. When performing standard navigation from the frontend to admin (or reveresed) everything works just fine.

However, if you navigate programatically to a page using another template (using either $router.push or $router.replace), styles imported by the previous template are note being removed.

To make illustrating the issue easier I created a very minimalistic repo with fresh install of Vuex 1.0.0:

https://github.com/mmieluch/nuxt-templates-styles-issue

Steps:

  1. Clone the repo.
  2. yarn
  3. yarn dev
  4. Open http://localhost:3000.
  5. Click away!

There are two templates in this repository: one is setting main's background colour (and nothing else), the other one is setting main's border (again - and nothing else). However, when you start visiting links, you can see that both styles are being applied; and they shouldn't be.

<!--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/c2227">#c2227</a>)</em></sub></div>