[Vuejs]-Scoped css for Nuxt.js layout

by

0👍

✅

There are various solutions I can think of, with varying degrees of hackiness.

Easist – most reliable – direct DOM manipulation
This is the less Vue/Nuxt specific. You can just add a class to the element and then within the desire components correct lifecycle method you attach another class with the desired styles

more work – still reliable – Vuex store
Use a Vuex store to store any props you want to be passed from components up to layouts. Feels like it is overkill for simply setting background colors. But who knows what you also will want to set in the future and its not difficult to set up a Vuex store.

more work – least realiable – Router Guards
You can add specific route checks that set the color of the background when a specific route is reached or a route contains a certain string, etc. This is not a good solution because it has the highest chance of getting broken in the future if routes change.

👤Justin Kahn

0👍

In the body of this special page include a class name:

<body class="special">

Then in your CSS include rules for nav that are only for this page:

body.special nav {
  background-color: rgba(0, 0, 0, 0);
}
👤Gerard

-1👍

You might be able to refresh the page to see if that fixes the problem. (I also had the same problem as you, and then figured out that it might be a hot reload issue.)

👤April

Leave a comment