By Gary simon - Feb 09, 2018
Note: This tutorial is a part of our free course: Vue Tutorial in 2018 - Learn Vue.js by Example
Vue.js makes it easy to handle CSS. You're able to use Vue Directives to handle both class and style binding within the template, and you can choose to write inline CSS within the component, or link to an external CSS file for more organization.
In this tutorial, we're going to cover all of the relevant topics pertaining to Vue CSS.
Let's get started!
Be sure to Subscribe to the Official Coursetro Youtube Channel for more videos.
If you look at the /src/components/Skills.vue component file we've been working on, you will notice a line near the bottom:
<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>Save it, and you will see the app now has a light background color.
If you add scoped to <style>:
<style scoped>..and save, the gray background disappears.
At the moment, our CSS rulesets for our 2 components are confined within the actual component. If you have a lot of CSS, it may make more sense to separate them into separate CSS files.
To do that, in the Skills.vue file, make the following adjustment:
<style src="./Skills.css" scoped>
</style>Create a Skills.css file in the same folder with the following rulesets:
ul {
list-style-type: none;
}
li {
font-weight:bold;
}Save it (you may need to refresh manually) and you will see the rulesets still apply.
We're not going to use this method, so remove src=".. and delete the Skills.css file.
Both class and style binding in Vue 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!
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.
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.
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'
}Simple!
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:
Great! Hopefully you learned quite a bit about utilizing CSS within Vue.js.
Let's continue on by learning about Vue Forms.
Note: This tutorial is a part of our free course: Vue Tutorial in 2018 - Learn Vue.js by Example
