Full-Stack Web Development with Vue.js and Node

Building the Real Application Chapter 5

The main.css will be our main CSS file that includes all other CSS components. We can

directly add all our style code here as well. But to maintain readability, we will be creating

separate style sheets for different sections in our applications and importing them here.

Since we will be importing all the style sheets here, now we need to include only

the main.css file in the main application so that it gets loaded. To do that, let's add the

following line of code in src/App.vue:

<template>

<div id="app">

<router-view/>

</div>

</template>

<script>

import './assets/stylesheets/main.css';

export default {

name: 'App',

};

</script>

We have imported a style sheet called home.css in main.css that does not yet exist. So

let's go ahead and create that in the same directory, which is src/assets. Also, let's

remove the following piece of code from App.vue and paste it into the home.css file: so

that our component is clean:

#app {

font-family: 'Avenir', Helvetica, Arial, sans-serif;

-webkit-font-smoothing: antialiased;

-moz-osx-font-smoothing: grayscale;

text-align: center;

color: #2c3e50;

margin-top: 60px;

width: 100%;

}

Introduction to Vuetify

Vuetify is a module that can be used to build materialistic web page designs for Vue.js
applications. It provides several features that can be used as building blocks for our

application. It is a UI framework like Bootstrap, but it mostly has the material components.

For more details, you can go to this link https:/​/​vuetifyjs.​com.