Nuxt.js: CSS mixing between two different layouts

[acidjazz]

I have my main layout using layouts/default.vue

<template lang="pug">
  #app
    Top
    nuxt
    Bottom
    Login
</template>

<script>
import Top from '~/components/layout/Top.vue'
import Bottom from '~/components/layout/Bottom.vue'
import Login from '~/components/Login.vue'
export default {
  components: { Top, Bottom, Login },
}
</script>

<style lang="stylus">
@import '../assets/stylus/main'
</style>

and then I have an admin backend using layouts/control.vue

<template lang="pug">
  #app
    Top
    nuxt
</template>

<script>
import Top from '~/components/control/layout/Top.vue'
export default {
  components: { Top },
  middleware: 'admin',
  head () {
    return {
      link: [
        { rel: 'stylesheet', href: 'https://cdnjs.cloudflare.com/ajax/libs/bulma/0.5.3/css/bulma.min.css' },
      ],
    }
  }
}
</script>

<style lang="sass">
@import assets/sass/bulma.sass
</style>

I want to keep two separate CSS frameworks for both layouts, the main one I have my own I'm buliding and hten for the admin I want to use bulma and some bulma plugins (hence bulma.sass)

My issue is if I go from one layout to the other via a router-link this breaks things, the css mixes, but if I then refresh the page on either layout its fine.

Is this a bug? or is there a better approach for layout-specific CSS includes?

_{This question is available on Nuxt.js community (#c1616)}

[dotneet]

I think this is not a bug.
If I were you, I use anchor tag instead of router-link.

[acidjazz]

How about some type of feature/item in the router or page to ask to reset/wipe the current CSS thats loaded?

[dotneet]

basically, no way to reset the CSS that is loaded once.

[acidjazz]

@dotneet you have a good point.. I'll try the href idea, I guess this is the one major downside of having a router that harnesses the history API?

[Atinux]

Hi @acidjazz, @dotneet is right, sadly there is no way of resetting the CSS when applied, you have to use an <a> tag to make a "fresh" navigation. If it was possible it will have already done into Nuxt.js :)

[Atinux]

You can try to use scoped attibute on <style> but when using some libraries it's pretty dirty and won't work with sub-components :/

[digitalit]

So you can only have one css framework? I also would like to have different for admin part and site.

[pi0]

@digitalit However it is possible using scoped styles, I strongly suggest using two projects one for admin and one for the public site.

[digitalit]

Makes sense @pi0 . Thank you.

[acidjazz]

@pi0 the only conflict i have that is an admin area of a site shares so much other stuff like middleware and the vuex store, two separate projects duplicates all of that.

[lock[bot]]

This thread has been automatically locked since there has not been any recent activity after it was closed. Please open a new issue for related bugs.