Customize your components: Class and Style Bindings 💅
Tags: vue, javascript, webdev, frontend
Published: 2023-10-24 06:33:00

## Overview
In Vue it's possible to manipulate style of your components for assign dynamic value and create custom effects.
In this article will explain how to use this powerful feature.
Let's start! 🤙

---

## Binding HTML Classes
> For data binding it's necessary the `v-model` directive (if you don't remember or don't know, you can read [this article](https://dev.to/dvalin99/data-binding-directives-5gn2)).

There are two ways for use the style binding: **Binding to Objects** or **Binding to Array**.
Let's start with the first one.
<br/>
### Object

```html
<script setup>
import { ref } from "vue"

const hasError = ref(false);
</script>

<template>
   <div :class="{'text-danger': hasError }"></div>
</template>
```

`text-danger` is a CSS class and will be rendered when `hasError` will be `true`.
Yes, `hasError` is a simply JavaScript boolean value, in this case wrapped by `ref()`, but it's possible use anything JavaScript expression, for example:

```html
<script setup>
import { ref } from "vue"

const someProp = ref(0);
</script>

<div :class="{'someClass': someProp === 0 ? true : false }"></div>
```
Computed properties are welcome and it's possible use it, in this way:

```html
<script setup>
import { ref, computed } from "vue"

const isActive = ref(true);
const error = ref(null);

const computedProp = computed(() => ({
  'someProp': isActive.value || !error.value,
  'text-danger': error.value && error.value.type === 'danger'
}))
</script>

<template>
   <div :class="computedProp"></div>
</template>
```
<br/>
<br/>

### Array
We can bind `:class` to an array to apply a list of classes in this way:

```html
<script setup>
import { ref } from "vue"

const activeClass = ref('active');
const errorClass = ref('text-danger');
</script>

<template>
   <div :class="[activeClass, errorClass]"></div>
</template>
```
This is the simplest example of using Arrays.
As for Object it's possible use anything JavaScript expression:

```html
<div :class="[customClass ? isActive : '', anotherClass]"></div>
```

---
 
## Binding Inline Styles
As for class, there are same ways for binding custom style.

### Object
```html
<script setup>
import { ref } from "vue"

const paragraphColor = ref('red');
const fontSize = ref(30);
</script>

<template>
   <p :style="{ color: activeColor, fontSize: fontSize + 'rem' }"></p>
</template>
```
Although camelCase keys are recommended, :style also supports kebab-cased CSS property keys,for example:

```html
  <p :style="{ 'font-size': fontSize + 'rem' }"></p>
```
To keep clean code, it's a good idea declare an object for style the code in this way:

```html
<script setup>
import { reactive } from "vue"

const paragraph = reactive({
  color: 'red',
  fontSize: '13px'
})
</script>

<template>
   <p :style="paragraph"></p>
</template>
```

Again, object style binding is often used in conjunction with computed properties that return objects.

### Array
We can bind `:style` to an array of multiple style objects. These objects will be merged and applied to the same element:

```html
<div :style="[baseStyles, overridingStyles]"></div>
```
### Vendor Prefix
When you use a CSS property that requires a vendor prefix  Vue will automatically add the appropriate prefix: it does this by checking at runtime to see which style properties are supported in the current browser. If the browser doesn't support a particular property then various prefixed variants will be tested to try to find one that is supported.

---

## Conclusion

Vue provides style binding to make your components custom, giving you the ability to create and manipulate the app's style at runtime.
Feature not to be underestimated given its power.
Happy coding!✨

---

Hi👋🏻
My name is Domenico, software developer passionate of Vue.js framework, I write article about it for share my knowledge and experience.
Don't forget to visit my Linktree to discover my projects 🫰🏻

Linktree: https://linktr.ee/domenicotenace

Follow me on dev.to for other articles 👇🏻

{% embed https://dev.to/dvalin99 %}