Struggling with modifying background color in Vue.js?

Question

Struggling with modifying background color in Vue.js?

My intention is to make the landing page background color orange, but I'm encountering an issue where all pages end up with the same color.

I attempted to use scoped on the landing page to target only that specific page, however, it resulted in the entire page losing its orange background.

The main objective here is to alter only the landing page.

I've already experimented with using HTML and Body instead of the ' * ', but those approaches didn't yield the desired outcome in this scenario 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>

javascript css vue.js

Answer 1

Answer №1

When using Vue Router in a Single Page Application (SPA), the <code>HTML

and body elements are outside of the application scope, meaning they do not re-render when transitioning from one page to another.

The first issue - SPA:

In a Single File Component, styles applied to the body and html tags will only take effect upon a page refresh (e.g., going from page-1 to page-2 and clicking on F5):

<!-- page_2 -->
<style>
   body{
    background: orange; /* does not apply when transitioning between pages */
   }
</style>

The second issue - "out of scoped":

The use of scoped in CSS limits its application to elements within the current component scope, excluding the body element.

Solution with Hello World concept:

A simple solution is to utilize Lifecycle Hooks to dynamically change the background color of the body tag. On created, set the background color to orange, and on destroyed, remove it:

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

Creating a "min:100vh app":

An alternative approach is to add a wrapper element with a style of min:100vh inside your #app to cover the entire body/html area (body { margin: 0;} must be set):

Further reading: Changing Page Background Color for Each Route

Exploring more solutions:

Changing Body Styles in Vue Router

CSS best practice:

It is recommended to apply general styles to the body tag:

body{
   background: orange;
}

Avoid using the wildcard selector (*) as it selects all elements on the page:

Answer 2

When using Vue Router in a Single Page Application (SPA), the <code>HTML

and body elements are outside of the application scope, meaning they do not re-render when transitioning from one page to another.

The first issue - SPA:

In a Single File Component, styles applied to the body and html tags will only take effect upon a page refresh (e.g., going from page-1 to page-2 and clicking on F5):

<!-- page_2 -->
<style>
   body{
    background: orange; /* does not apply when transitioning between pages */
   }
</style>

The second issue - "out of scoped":

The use of scoped in CSS limits its application to elements within the current component scope, excluding the body element.

Solution with Hello World concept:

A simple solution is to utilize Lifecycle Hooks to dynamically change the background color of the body tag. On created, set the background color to orange, and on destroyed, remove it:

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

Creating a "min:100vh app":

An alternative approach is to add a wrapper element with a style of min:100vh inside your #app to cover the entire body/html area (body { margin: 0;} must be set):

Further reading: Changing Page Background Color for Each Route

Exploring more solutions:

Changing Body Styles in Vue Router

CSS best practice:

It is recommended to apply general styles to the body tag:

body{
   background: orange;
}

Avoid using the wildcard selector (*) as it selects all elements on the page:

Answer 3

Answer №2

Try this new approach:

html {
    background: orange;
}

or even better,

body {
    background: orange;
}

Answer 4

Try this new approach:

html {
    background: orange;
}

or even better,

body {
    background: orange;
}

Answer 5

Answer №3

To add a dynamic binding to the class so it only shows on the landing page route, consider implementing this approach:

In your App.vue file or any higher-level component serving as the app shell, you can do something like this:

/* ==== in App.vue (or Landing Page parent Component) ==== */
<template>
  <div :class={orangeBackground: $route.path.includes('/landingPagePath')}>
     // other content here, such as the router view
     <router-view> </router-view>
  </div>   
</template>
<script>
</script>
<style>
.orangeBackground {
    background: orange;
}
</style>

The concept revolves around wrapping the DOM within the parent component and toggling the .orangeBackground class based on whether the user is on the landing page route.

Answer 6

To add a dynamic binding to the class so it only shows on the landing page route, consider implementing this approach:

In your App.vue file or any higher-level component serving as the app shell, you can do something like this:

/* ==== in App.vue (or Landing Page parent Component) ==== */
<template>
  <div :class={orangeBackground: $route.path.includes('/landingPagePath')}>
     // other content here, such as the router view
     <router-view> </router-view>
  </div>   
</template>
<script>
</script>
<style>
.orangeBackground {
    background: orange;
}
</style>

The concept revolves around wrapping the DOM within the parent component and toggling the .orangeBackground class based on whether the user is on the landing page route.

Answer 7

Answer №4

Utilizing the latest composition API, your code will take on this form:

setup() {
  var color = "#343E3D";
  onMounted(() => {
    console.log("mounted!");
    document.body.style.backgroundColor = color;
  });
  onUnmounted(() => {
    console.log("unmounted!");
    document.body.style.backgroundColor = null;
  });
  return {};
},

By utilizing these two Lifecycle Hooks, you can dynamically alter the background when your component is loaded or unloaded. I encountered a similar issue where one page required a distinct background compared to the rest of the website.

Answer 8

Utilizing the latest composition API, your code will take on this form:

setup() {
  var color = "#343E3D";
  onMounted(() => {
    console.log("mounted!");
    document.body.style.backgroundColor = color;
  });
  onUnmounted(() => {
    console.log("unmounted!");
    document.body.style.backgroundColor = null;
  });
  return {};
},

By utilizing these two Lifecycle Hooks, you can dynamically alter the background when your component is loaded or unloaded. I encountered a similar issue where one page required a distinct background compared to the rest of the website.

Struggling with modifying background color in Vue.js?

Answer №1

Solution with Hello World concept:

Creating a "min:100vh app":

Exploring more solutions:

CSS best practice:

Answer №2

Answer №3

Answer №4

Similar questions

What are the steps to integrate the extract text plugin with Vue component CSS?

Switching between blog posts in a Vue application by clicking on a link from the sidebar labeled "Recent Updates."

Guide on incorporating a Python script into a website using DJango

Ways to reverse engineer HTML, CSS, and JavaScript code into HTML format

Display specific content according to the hash in the URL

Styling tooltips using only css - Dealing with overflow issues

Troubleshooting issues with AJAX script and JSON formatted data

Deciphering the GWT compiler's results

The reason why JavaScript condenses two or more spaces into just one space

Dynamic div with height controlled by the content of the background image

How can I reset the mousemove event in jQuery?

Submitting an mvc partial view form to send data from the parent view

What steps should I take to develop an Outlook add-in that displays read receipts for action items in sent emails?

Access control using Vue.js Cookies

Error in Angular Universal: KeyboardEvent is not defined

I believe this solution is functional, but it seems to undermine the intention of utilizing a framework

Failure to choose a value in AngularJS using the Chosen directive

Utilizing Jquery to automatically scroll to a specific div on page load by setting an

The MaterialTable is unable to display any data

Troubleshooting Issues with Passing Values in jQuery AJAX POST Requests