Nuxt•2mo ago

CSS being carried to a different page that uses a different layout

I am using a layout that is specifically for the login page of my app. This is because I want the page to take up the entire screen (remove the navbar etc.). An issue im having is that the CSS that im using to remove the body margin and whatever is being carried back out of the login screen and into the rest of the app Here's the CSS in the layout:

<style>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}
.login-layout {
  height: 100%;
  min-height: 100%;
}
.app-wrapper {
  height: 100%;
  min-height: 100%;
  padding: 0px;
  min-width: 100%;
}
#__nuxt {
  height: 100%;
  min-height: 100%;
}
</style>

<style>
body, html {
  margin: 0;
  padding: 0;
  height: 100%;
}
.login-layout {
  height: 100%;
  min-height: 100%;
}
.app-wrapper {
  height: 100%;
  min-height: 100%;
  padding: 0px;
  min-width: 100%;
}
#__nuxt {
  height: 100%;
  min-height: 100%;
}
</style>

.app-wrapper is applied to the body etc. so that when I go to the login screen it just applies those styles. When I go back to / for example, the .app-wrapper style is still applied to the page, and so the body loses its margin etc. that it had originally. How can I fix this?

5 Replies

Cue•2mo ago

Programmatically add a class to your html element for the login page. Then scope the styles to the page.

MuzMatchOP•2mo ago

Ive had to just make the login layout positioned absolutely and take up the whole viewport. Not something I wanted to do but I think that's the most simple way of doing this

manniL•2mo ago

@Bebet that's correct and intended. if styles are not scoped, they apply to the whole site and will not be "unloaded" when changing.

manniL•2mo ago

https://github.com/nuxt/nuxt/issues/3877 and https://github.com/nuxt/nuxt/issues/22817 <- see this issues for more details. You can e.g. use useHead to apply body attributes and set style/classes that you can unset again when changing a page 🙂

GitHub

CSS from multiple layouts is being included on individual pages · I...

Version v1.4.2 - v2.4.2 (see below). Reproduction link https://github.com/markplewis/nuxt-layout-css-issue Steps to reproduce Clone the following example repo. Run npm install then npm run dev. Nav...

GitHub

Nuxt does not clean up CSS after navigation (and injects CSS pre-na...

Environment Operating System: Darwin Node Version: v16.19.0 Nuxt Version: 3.6.5 Nitro Version: 2.5.2 Package Manager: [email protected] Builder: vite User Config: extends, srcDir, build, hooks, runtimeCon...

MuzMatchOP•2mo ago

Ooh the useHead thing is good! Thanks

Gaming

Programming

CSS being carried to a different page that uses a different layout