[Vuejs]-Dynamically add image with css variable in vue

by

0👍

This can be achieved in Nuxt app. In the template section add <style> tag and add your css with variables. Example:

<template>
  <div>
    <div>
      <ToolbarMenu />
    </div>
    <style>
       :root {
         --main-bg-color: {{ this.colorFromData }};
       }
       body {
           background-color: var(--main-bg-color)
      }
    </style>
  </div>
</template>

<script>
export default {
  data() {
    return {
      colorFromData: 'blue',
    }
  }
}
</script>

Leave a comment