Styling Vue.js components using CSS

Today, we will learn about how to can style a component in different ways in Vue.js

1) Understanding Scoped in Vue.js

<style scoped>

This means that any CSS defined in this component, will only apply to the template in this component. To see this in action, visit the /src/App.vue file and place the following:

<style>
  body {
    background-color: #eeeeee;
  }
</style>

2) Vue.js Class Binding

Both class and style binding in Vue.js use the v-bind directive. This directive allows you to dynamically control when and if CSS classes and styles are applied, along with CSS properties and values.

Adjust our template in Skills.vue as shown:

<template>
  <div class="skills">
    <div class="holder">
      <ul>
        <li v-for="(data, index) in skills" :key='index'>{{index}}. {{data.skill}}</li>
      </ul>

      <!-- Add this -->
      <div v-bind:class="{ alert: showAlert}"></div>

    </div>
  </div>
</template>

Here, we’re using v-bind on the class attribute. Then, we’re saying to insert the alert class as a value, only if the boolean showAlert is true.

Let’s add the showAlert property in the component logic section:

data() {
    return {
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ],
      showAlert: true  // Add this
    }
  },

And then, add the .alert class in the styles section:

<style scoped>
  .alert {
    background-color: yellow;
    width:100%;
    height: 30px;
  }
</style>

If you look at the browser, you will see a yellow rectangle. If you want to show .alert only if showAlert is false, you can simply add an exclamation point before showAlert in the template. Simple!

3) Multiple Class Binding in Vue.js

You can also control when to add or remove multiple classes using v-bind. Update the template section to the following:

<div v-bind:class="{ alert: showAlert, 'another-class': showClass }"></div>

We simply separate the classes and properties with a comma. Then, you would simply define another boolean property in the component logic, and define the .another-class in the styles.

4) Using v-bind:class with an Object

If you want to keep your component template more clean, you can do the following:

<div v-bind:class="alertObject"></div>

And in the component logic:

data() {
    return {
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ],
      alertObject: {
        alert: true,
        // More classes here if you want..
      }
    }
  },

Save it, and the yellow .alert class will show, because it’s bound to true above.

5) Vue.js Style Binding

Style binding in Vue allows you to control specific CSS properties by using the v-bind directive on the style attribute.

Adjust the template to the following:

<div v-bind:style="{ backgroundColor: bgColor, width: bgWidth, height: bgHeight }"></div>

In the component logic, adjust it to:

data() {
    return {
      skills: [
          { "skill": "Vue.js" },
          { "skill": "Frontend Developer" }
      ],
      bgColor: 'yellow',
      bgWidth: '100%',
      bgHeight: '30px'
    }
  },

Now, if you save, you will see that we have the same result. But to keep things more clean in the component template, you could do this instead:

<div v-bind:style="alertObject"></div>

and adjust the component logic like so:

alertObject: {
   bgColor: 'yellow',
   bgWidth: '100%',
   bgHeight: '30px'
}

6) Continuing on by Styling our Project

• If you have been following along throughout this course, you will notice that we have been working on a simple project. To this point, it hasn’t done much and it has no UI.
• Let’s change that by adding some rulesets so that we can make it look better, and keep on learning.
• Adjust the template section of our Skills.vue component to the following:

<template>
  <div class="container">
    <div class="holder">
      <ul>
        <li v-for="(data, index) in skills" :key='index'>{{data.skill}}</li>
      </ul>
      <p>These are the skills that you possess.</p>
    </div>
  </div>
</template>

In the styles section of our Skills.vue component, add the following rulesets:

<style scoped>

  .holder {
    background: #fff;
  }

  ul {
    margin: 0;
    padding: 0;
    list-style-type: none;
  }
  
  ul li {
    padding: 20px;
    font-size: 1.3em;
    background-color: #E0EDF4;
    border-left: 5px solid #3EB3F6;
    margin-bottom: 2px;
    color: #3E5252;
  }

  p {
    text-align:center;
    padding: 30px 0;
    color: gray;
  }

  .container {
    box-shadow: 0px 0px 40px lightgray;
  }

</style>

And then, open up the /src/App.vue and add the following global CSS rulesets:

<style>
@import url('https://fonts.googleapis.com/css?family=Montserrat:400,700');

body {
  background-color: #EEEEEE;
  font-family: 'Montserrat', sans-serif;
  display: grid;
  grid-template-rows: auto;
  justify-items: center;
  align-items: center;
}
body, html {
  margin: 0;
  height: 100%;
}
#app {
    width: 50%;
}
</style>

At this point, the result in the browser should now look like: