How to use inline styles in Vue

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.


Speed up your responsive apps and websites with fully-featured, ready-to-use open-source admin panel templates—free to use and built for efficiency.


About the Author