How to use inline styles in Vue
Łukasz Holeczek
Follow Łukasz Holeczek on GitHub
Connect with Łukasz Holeczek on LinkedIn
Follow Łukasz Holeczek on X (Twitter)
Inline styles in Vue enable dynamic styling that responds to component data and user interactions, perfect for values that change based on state. As the creator of CoreUI, a widely used open-source UI library, I’ve implemented inline styles in countless Vue components for dynamic theming and interactive elements. From my expertise, the most effective approach is using object syntax with computed properties for complex calculations. This method provides reactive styling that updates automatically when component data changes.
Use :style with object syntax for direct property mapping and dynamic values.
<template>
<div :style="{
backgroundColor: bgColor,
fontSize: fontSize + 'px',
width: progress + '%'
}">
Dynamic Styles
</div>
</template>
<script setup>
import { ref } from 'vue'
const bgColor = ref('#007bff')
const fontSize = ref(16)
const progress = ref(75)
</script>
The :style directive accepts objects with camelCase property names where values can be dynamic data properties. Concatenate units like ‘px’ or ‘%’ for numeric values. Vue automatically applies vendor prefixes when needed and handles style reactivity.
Best Practice Note:
This is the same inline styling approach we use in CoreUI Vue components for dynamic themes. Use computed properties for complex style logic and prefer CSS classes for static styles to maintain performance.
