Using Vue variables in styles

Question

So I want to use some Vue data/prop variables in the <style> tag placed at the bottom of the component.

So let's say I have a component like this:

<template>
  <div class="cl"></div>
</template>
<script>
export default {
  data () {
    return {
      val: '30px'
    }
  } 
..
}
</script>
<style>
.cl p{
  height: 30px;
}
</style>

I want to somehow use the val data variable in the <style></style> such that I can style it that way.

Now I know doing this <div :style="{'height':val}"></div> is how you style using vue props/variables. But that only sets the style of that div. I want all the p tags or any tags inside my div to have a certain style, and that can only be done by declaring it as a class.

There is also another way of doing it by defining the class and making it active (true/false) value, like : <div :class="{'cl': someBoolVariable}"></div>. But what if I want it to be dynamic enough to change the height based on some computation/value passed from parent component?

I need something like this, if possible:

<style>
.cl p {
  height: val;
}
</style>

Can anyone suggest a way of doing this, if possible? Or a simple work around to achieve this?

Fab · Accepted Answer · 2022-08-03 12:08:23Z

11

You can achieve it using a CSS variable on your main div element

<template>
  <div class="cl" :style="'--p-height: ' + val"></div>
</template>

<script>
  export default {
    data() {
      return {
        val: '30px'
      }
    } 
  }
</script>

<style>
.cl p {
  height: var(--p-height);
}
</style>

Here's a jsfiddle

edited Aug 3, 2022 at 12:08

answered Jun 5, 2019 at 10:12

Fab

4,6572 gold badges26 silver badges47 bronze badges

Sign up to request clarification or add additional context in comments.

5 Comments

hrishikeshpaul Over a year ago

Can you also do this: `:style="{'--p-height': val}"?

Fab Over a year ago

@hrishikeshpaul Yes, it's the same

spidey Over a year ago

This does not work! checked jsfiddle and that is also not working. am I missing something?

Fab Over a year ago

@spidey dont' know why but in the jsfiddle vue was removed. If you select "vue 2.2.1" in "framework and extensions" in the menu just above the script box and run again it works.

Fab Over a year ago

I have updated the jsfiddle with a working one

Crossoni · Accepted Answer · 2023-09-24 10:51:02Z

0

In Vue 3 you can do it in a much simpler way by using v-bind on styles:

<template>
  <div class="text-area">Colored text</div>
</template>

<script setup lang="ts">
const color = '#ebae34'
</script>

<style scoped lang="scss">
.text-area {
  color: v-bind(color);
}
</style>

answered Sep 24, 2023 at 10:51

Crossoni

4136 silver badges16 bronze badges

Collectives™ on Stack Overflow

Using Vue variables in styles

2 Answers 2

5 Comments

Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

2 Answers 2

5 Comments

Comments

Your Answer

Sign up or log in

Post as a guest

Related