Setting css variable in VueJs

voronovam — Sun, 15 Jan 2023 14:35:54 +0000

Hi🤚

In this tutorial I will show you how to set css variable in VueJs application.

Sometimes we need to change color text and/or background of our elements. To make it I change value of css variable according to the condition.

Full DEMO

Change window with to see result.

CSS Variables

I created css variables: --bg-color and --text-color and using like this:

background-color: var(--bg-color)
color: var(--text-color)

Computed VueJs

In VueJs I use computed field cssColors with this conditions:

cssColors() {
      if (this.width > 1000) {
        return {
          "--bg-color": "#212121",
          "--text-color": "#fff",
        };
      }

      if (this.width > 500 && this.width < 1000) {
        return {
          "--bg-color": "#FF00E5",
          "--text-color": "#2DFFE6",
        };
      }

      return {
        "--bg-color": "#fff",
        "--text-color": "#000",
      };
    },

Method VueJs

For watching window width i using method getWidth and get window.innerWidth like this:

getWidth(e) {
  this.width = window.innerWidth;
},

Source code

About me

I`m designer and frontend developer. My github.

DEV Community: voronovam

Setting css variable in VueJs

CSS Variables

Computed VueJs

Method VueJs

About me