Not getting designed layout - vue.js

Question

Vuetify official example
I have, say copied the layout from the vuetify docs but I am not getting the same layout. I cannot figure out what is blocking me. Is there some default properties that I have to deal with?
Login.vue:
<template>
<v-app id="inspire">
<v-content>
<v-container
class="fill-height"
fluid
>
<v-row
align="center"
justify="center"
>
<v-col
cols="12"
sm="8"
md="4"
>
<v-card class="elevation-12">
<v-toolbar
color="primary"
dark
flat
>
<v-toolbar-title>Login</v-toolbar-title>
<v-spacer />
</v-toolbar>
<v-card-text>
<v-form>
<v-text-field
label="Login"
name="login"
prepend-icon="person"
type="text"
v-model="username"
/>
<v-text-field
id="password"
label="Password"
name="password"
prepend-icon="lock"
type="password"
v-model="password"
/>
</v-form>
</v-card-text>
<v-card-actions>
<v-spacer />
<v-btn #click="login" color="primary" >Login</v-btn>
</v-card-actions>
</v-card>
</v-col>
</v-row>
</v-container>
</v-content>
</v-app>
</template>
app.vue:
<template>
<v-app id="app">
<v-content>
<v-container fluid>
<router-view />
</v-container>
</v-content>
</v-app>
</template>
<script>
I do not have any custom designed css. I am using vue-cli.
Here is what my layout looks like:
With no error in console.