Full-Stack Web Development with Vue.js and Node

(singke) #1
Building the Real Application Chapter 5

Vuetify uses material icons well, so also import the fonts. Add the following line of code
in index.html as well:


<head>
<meta charset="utf-8">
<meta name="viewport" content="width=device-width,initial-scale=1.0">
<link href="https://unpkg.com/vuetify/dist/vuetify.min.css"
rel="stylesheet">
<link
href="https://fonts.googleapis.com/css?family=Roboto:300,400,500,700|Materi
al+Icons" rel="stylesheet">
<title>movie_rating_app</title>
</head>

Redesigning pages with Vuetify


Now that we have Vuetify, let's move on to creating the pages for the application. provides


us with some predefined themes as well. We will use a very simple and minimalistic theme
for the app. Of course, we can also customize these according to our needs.


The outcome of this section will look as follows:

Free download pdf