Vue.js is powerful in DOM manipulation. The fact that the framework was created for this purpose stands correct in all situations. We can change the background or the body background color of a web application with just one reactive state binding.

Here’s a demo code on how to do that:

<script setup>
import { ref, onMounted } from 'vue'

const backgroundColor = ref('#ff0000')

const setBackgroundColor = () => {
  document.querySelector('body').style.backgroundColor = backgroundColor.value;
}
</script>

<template>
<div>
  <div>
    <input type="text" v-model="backgroundColor" />
    <button @click="setBackgroundColor">
      Change background
    </button>
  </div>
</div>
</template>
Code language: HTML, XML (xml)

In the above code, we have a reactive state named backgroundColor. Then in line 6, we have a method named setBackgroundColor. It changes the background color of the body to the value of backgroundColor.

We call the setBackgroundColor method from the template using a button. We have an input field above the button where we can enter some background color (RGB, rgba, valid HTML color name, etc).

You can find a working version of the above code from my repos below:

Codesandbox / Demo | Github