Dynamic Styling in Vue

Welcome back! In the last few lessons, you learned how to make your Vue app interactive by using the Composition API, binding data to your template, and handling user events. Now, let’s take your app to the next level by making it visually dynamic. In modern web applications, it’s common to change the look and feel of your app based on user actions or state. For example, you might want to highlight a button when it’s active, switch between light and dark themes, or show different styles for different types of messages. This is where dynamic styling comes in.

By the end of this lesson, you will know how to use Vue’s powerful style binding features to change classes and inline styles based on your app’s state. You will see how to use computed properties to manage these styles in a clean and organized way. You will also build a simple theme toggle that lets users switch between light and dark modes, making your app feel more modern and user-friendly.

Before we dive into dynamic styling, we need to introduce an important Vue feature: computed properties. You've already seen ref() for creating reactive data. Now meet computed(), which creates reactive values that are derived from other reactive data.

Use computed() when:

• You need to derive a value from other reactive data
• The calculation might be used multiple times
• You want automatic reactivity and caching

For dynamic styling, computed properties are perfect because they let us define complex class or style logic once, and Vue handles the rest.

In Vue, you can bind CSS classes to your elements dynamically using the :class directive. This allows you to add or remove classes based on the state of your app. For example, you might want to apply a special class when a theme is set to dark mode.

Let’s look at a real example from your greeting card app. In the <script setup> block, you can create a computed property called cardClasses that returns an object. Each key in the object is a class name, and the value is a boolean that determines whether the class should be applied. Here’s how it looks:

const cardClasses = computed(() => ({
  'greeting-card': true,
  'dark-theme': theme.value === 'dark'
}))

In this example, the greeting-card class is always applied, while the dark-theme class is only applied if the theme variable is set to 'dark'. You then bind this object to your template using :class:

<div :class="cardClasses">
  <!-- content here -->
</div>

When the theme is light, the output HTML will look like this:

<div class="greeting-card">
  <!-- content here -->
</div>

If the theme is dark, the output will be:

<div class="greeting-card dark-theme">
  <!-- content here -->
</div>

This makes it easy to switch styles just by changing the value of theme. Using computed properties for class bindings keeps your code organized and makes it easy to manage complex styling logic.

Sometimes, you need to change specific CSS properties directly, such as the color of a heading or the background of a button. Vue lets you do this with the :style directive, which binds an object of CSS properties to an element.

For example, you can create a computed property called headerStyle that returns a style object based on the current theme:

const headerStyle = computed(() => ({
  color: theme.value === 'dark' ? '#69e2a8' : '#42b983'
}))

This computed property checks the value of theme and sets the color accordingly. You can then bind it to your template like this:

<h1 :style="headerStyle">{{ greeting }}</h1>

When the theme is light, the heading will be green. When the theme is dark, it will use a lighter green color. This approach gives you fine-grained control over your styles and lets you respond to changes in your app’s state instantly.

Let’s put these ideas together by building a simple theme toggle. In your app, you can create a reactive variable called theme that holds either 'light' or 'dark'. You can then write a function called toggleTheme that switches the value of theme when a button is clicked.

Here’s how you might set this up in your <script setup> block:

const theme = ref('light') // Theme state: 'light' or 'dark'

function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}

In your template, you add a button that calls toggleTheme when clicked:

<button @click="toggleTheme" class="theme-toggle">Toggle Theme</button>

Now, whenever the user clicks the button, the theme switches between light and dark. Because your class and style bindings depend on the theme variable, the appearance of your app updates automatically. For example, the card’s background and text color will change, and the heading color will update as well.

Let’s walk through the full example from your App.vue file to see how everything fits together. Here is the relevant code:

<script setup>
import { ref, computed } from 'vue'

const greeting = ref('Hello Vue Learner!')
const recipient = ref('Your Name')
const theme = ref('light') // Theme state: 'light' or 'dark'

function changeGreeting(newMessage) {
  greeting.value = newMessage
}

function toggleTheme() {
  theme.value = theme.value === 'light' ? 'dark' : 'light'
}

// Computed property for dynamic class binding
const cardClasses = computed(() => ({
  'greeting-card': true,
  'dark-theme': theme.value === 'dark'
}))

// Computed property for dynamic style binding
const headerStyle = computed(() => ({
  color: theme.value === 'dark' ? '#69e2a8' : '#42b983'
}))
</script>

<template>
  <div :class="cardClasses">
    <button @click="toggleTheme" class="theme-toggle">Toggle Theme</button>
    <h1 :style="headerStyle">{{ greeting }}</h1>
    <p>To: {{ recipient }}</p>

    <div class="input-group">
      <input v-model="recipient" />
    </div>

    <div class="button-group">
      <button @click="changeGreeting('Happy Birthday')">Birthday</button>
      <button @click="changeGreeting('Congratulations')">Congrats</button>
    </div>
  </div>
</template>

When you run this code, you will see a greeting card with a toggle button in the top right corner. Clicking the "Toggle Theme" button switches the card between light and dark themes. The card’s background, text color, and heading color all update instantly based on the current theme. The greeting and recipient fields work just as before, and you can still change the greeting message with the buttons.

For example, if you start with the light theme, the card will have a white background and dark text. After clicking the toggle button, the card will switch to a dark background with light text, and the heading color will change to a lighter green. This shows how dynamic class and style bindings work together to create a responsive and visually appealing app.

In this lesson, you learned how to use Vue’s dynamic class and style bindings to change the appearance of your app based on its state. You saw how to use the :class and :style directives with computed properties to manage complex styling logic in a clean and organized way. You also built a simple theme toggle that lets users switch between light and dark modes, making your app more interactive and modern.

These skills are essential for building real-world Vue applications that look great and respond to user actions. In the next set of exercises, you will get hands-on practice with dynamic styling by writing your own class and style bindings. You are making great progress — keep up the good work, and get ready for even more exciting challenges ahead!