How to use dynamic classes in Vue
Łukasz HoleczekFollow Łukasz Holeczek on GitHubConnect with Łukasz Holeczek on LinkedInFollow Łukasz Holeczek on X (Twitter)Using dynamic classes in Vue enables conditional styling, interactive UI states, and responsive design patterns based on component data and user interactions.As the creator of CoreUI, a widely used open-source UI library, I’ve implemented dynamic class binding in numerous Vue components for theme switching, active states, and conditional styling in enterprise applications.From my expertise, the most flexible approach is to use Vue’s class binding syntax with objects and arrays.This method provides clean template syntax, reactive class updates, and powerful conditional styling capabilities for complex UI scenarios.
Use class binding with objects and arrays for dynamic CSS classes based on component state.
<template><div><!--Objectsyntaxforconditionalclasses--><button:class="{ 'btn': true, 'btn-primary': isPrimary, 'btn-large': isLarge, 'btn-disabled': isDisabled, 'btn-active': isActive }"@click="handleClick">{{label}}</button><!--Arraysyntaxformultipledynamicclasses--><div:class="[baseClasses, sizeClass, { 'highlighted': isHighlighted }]">Dynamiccontent</div><!--Computedpropertyforcomplexlogic--><nav:class="navigationClasses">Navigation</nav></div></template><script>exportdefault{props:['label','variant','size','disabled'],data(){return{isActive:false,isHighlighted:false}},computed:{isPrimary(){returnthis.variant==='primary'},isLarge(){returnthis.size==='large'},isDisabled(){returnthis.disabled},baseClasses(){return'component-base'},sizeClass(){return`component-${this.size||'medium'}`},navigationClasses(){return{'nav':true,'nav-dark':this.$store.state.darkMode,'nav-collapsed':this.$store.state.sidebarCollapsed}}},methods:{handleClick(){this.isActive=!this.isActive}}}</script>Vue’s class binding uses object syntax{ 'class-name': condition } for conditional classes and array syntax['class1', 'class2', { 'conditional': condition }] for mixed static and dynamic classes. Conditions are evaluated reactively, automatically updating classes when data changes. Use computed properties for complex class logic that depends on multiple data properties or store state. This approach provides excellent performance through Vue’s reactivity system and clean separation of styling logic from templates.
Best Practice Note:
This is the same approach we use in CoreUI Vue components for theme switching and responsive design patterns.Use computed properties for complex class logic, combine with CSS transitions for smooth state changes, and consider using CSS custom properties (variables) for dynamic styling values that change frequently.
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
Łukasz Holeczek, Founder of CoreUI, is a seasoned Fullstack Developer and entrepreneur with over 25 years of experience. As the lead developer for all JavaScript, React.js, and Vue.js products at CoreUI, they specialize in creating open-source solutions that empower developers to build better and more accessible user interfaces.
With expertise in TypeScript, JavaScript, Node.js, and modern frameworks like React.js, Vue.js, and Next.js, Łukasz combines technical mastery with a passion for UI/UX design and accessibility. CoreUI’s mission is to provide developers with tools that enhance productivity while adhering to accessibility standards.
Łukasz shares its extensive knowledge through a blog with technical software development articles. It also advises enterprise companies on building solutions from A to Z. Through CoreUI, it offers professional services, technical support, and open-core products that help developers and businesses achieve their goals.
Learn more about CoreUI’s solutions and see how your business can benefit from working with us.
