[Vuejs]-Vue 3: how to change body background color only in specific page

by

3👍

✅

In the App component you can put a conditional class on the top level element if the route matches your desired route. As long as your top level element is full height and width of the body.

<template>
  <div class="background" :class="{ otherColor: isSignIn }">
    <div id="app"></div>
  </div>
</template>

<script>
export default {
  computed: {
    isSignIn() {
      return this.$route.path === '/signIn';
    }
  }
}
</script>

<style>
.background {
  height: 100vh;
  width: 100vw;
  background-color: #ffffff;
}

.otherColor {
  background-color: #d4d4d4; // whatever background color you want.
}
</style>
👤Anthony Trombetta

Leave a comment