Having a hard time changing background color in Vue js

I’m trying to make the background color of the landing page orange, but the issue is that what I currently have makes all the pages orange.

I tried adding scoped to the landing page so it would style only that page, but when I do this, the entire page isn’t orange anymore.

The end goal is to only affect the landing page.

I’ve tried HTML and Body already instead of the ‘ * ‘, those don’t work in this case either.

landingpage.vue:

<template>
    <div class="container">
        <div class=landing>
            <h1>Hello.</h1>
            <router-link to="/work">
                <button id="work" type="button">See my work</button>
            </router-link>
            <router-link to="/home">
                <button id="home" type="button">Go home</button>
            </router-link>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Landing',
};
</script>

<style scoped>
* {
    background: orange;
}

h1 {
    margin-top: 100px;
    text-align: center;
    font-size: 80px;
    color: green;
}
#work {
    color: green;
    border: none;
    font-size: 25px;
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: 50%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#work:hover {
    color: white;
}
#home{
    color: green;
    border: none;
    font-size: 15px;
    text-decoration: none;
    margin: 0;
    position: absolute;
    top: 70%;
    left: 50%;
    -ms-transform: translate(-50%, -50%);
    transform: translate(-50%, -50%);
}
#home:hover {
    color: white;
}
</style>

Answer

HTML and body are outside the application (+ Vue Router = SPA => the body/html not re-render when you go from page-1 to page-2).

“problem one” – SPA

On Single File Component – body, html Styles applies only if the page-refresh (Go from page-1 to page-2 and click F5 for example):

<!-- page_2 -->
<style>
   body{
    background: orange; /* not apply if you go from page-1 to page-2 */
   }
</style>

“problem two” – “out of scoped”

scoped == CSS will apply to elements of the current component only. body is not a part of the current scoped component.

Hello World solution

The most basic “hello world” not dynamic idea to solve this is to use Lifecycle-Hooks– On created change body background by simple JS. On destroyed remove the background.

<script>
export default {
  name: "orange-page",
  created: function () {
    document.body.style.backgroundColor = "orange";
  },
  destroyed: function () {
    document.body.style.backgroundColor = null;
  },
};
</script>

“min:100vh app”

One more idea is to add “wrapper” + style min:100vh inside your #app (The #app will cover the entire body/html ***set: body { margin: 0;}.

Related example: https://www.pluralsight.com/guides/change-page-background-color-each-route

More ideas:

Changing body styles in vue router

css

In general use:

body{
   background: orange;
}

Not (* ==> selects all elements):