I am currently following along with this tutorial and I have reached the part where Vuetify is being added. Despite matching my code to the tutorial, Vuetify does not seem to load on my end.
In the comparison image below, the left side shows how it appears on my screen while the right side displays how it should look according to the tutorial.https://i.sstatic.net/2cnyX.png
Below is the relevant content of the .vue page:
<template>
<v-layout column>
<v-flex xs6 offset-xs3>
<div class="white elevation-2">
<v-toolbar class="cyan" flat dense dark>
<v-toolbar-title>Register</v-toolbar-title>
</v-toolbar>
<div class="pl-4 pr-4 pt-2 pb-2">
<input
type="email"
name="email"
v-model="email"
placeholder="email" />
<br>
<input
type="password"
name="password"
v-model="password"
placeholder="password" />
<br>
<div class="error" v-html="error" />
<br>
<button
@click="register">
Register
</button>
</div>
</div>
</v-flex>
</v-layout>
</template>
Here is the main.js where I imported Vuetify:
import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import '../node_modules/vuetify/dist/vuetify.min.css'
Vue.config.productionTip = false
Vue.use(Vuetify)
/* eslint-disable no-new */
new Vue({
el: '#app',
router,
components: { App },
template: '<App/>'
})
I'm puzzled by this issue. The vuetify.min.css file is in the correct location as specified during import. According to npm, Vuetify is installed correctly.