Vuetify css not applying

1
votes

I am working through this tutorial. I am about 40 minutes in where he is adding Vuetify and I have followed along and my code is the same as his as far as I can tell, however it seems Vuetify won't load on my end.

In the following picture, the left is what it looks like on my screen vs on the right the tutorial/ what it should look like.enter image description here

Here is the relevant .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 have 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 not sure what's the issue. The vuetify.min.css file is in the location where it is imported from. npm says that vuetify is correctly installed.

2
cssvue.jsvuetify.js
Is there any error in console regarding vuetify.min.css not being found? If so, please check if the path is correct. My wild guess is the ../ part is wrong, depending on where main.js is placed. If main.js is placed at root level, replace ../ with ./ and it will work. – tao
Actually I think that I have it right. When I change from ../ to ./ it outputs the error: * ./node_modules/vuetify/dist/vuetify.min.css in ./src/main.js It doesn't output any errors the way I have it. – dustycaviar
In that case, the error is elsewhere. Which makes your question unanswerable, as we have no way of knowing what's wrong with it and no way of inspecting. Consider providing a minimal reproducible example using codesandbox.io or a similar service. In theory, it could also be a case of tutorial no longer being up to date with latest versions of packages. Consider asking the tutorial's author for help. – tao

2 Answers

1
votes

Try this:

<template>
  <div>
    <v-app>
      <v-layout coloumn>...</v-layout>
    </v-app>
  </div>
</template>
0
votes

Replace the css import line with the one shown. This has been copied from the official Vuetify docs. (https://vuetifyjs.com/en/getting-started/quick-start)

import Vue from 'vue'
import App from './App'
import router from './router'
import Vuetify from 'vuetify'
import '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/>'
})