1

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.

Improve this question
3
  • 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. Commented Mar 1, 2020 at 19:30
  • 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. Commented Mar 1, 2020 at 20:39
  • 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. Commented Mar 1, 2020 at 20:46

2 Answers 2

Reset to default
2

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/>'
})
Improve this answer
Sign up to request clarification or add additional context in comments.

1 Comment

I appreciate the suggestion. I tried this and the issue remains the same. It seems like the .css file is being correctly import but the css just isn't applying. Because if I don't correctly specify the vuetify .css file then I get error complaining that it can't find vuetify.
2

Try this:

<template>
  <div>
    <v-app>
      <v-layout column>...</v-layout>
    </v-app>
  </div>
</template>
Improve this answer

1 Comment

Code only answers can almost always be improved by adding some explanation. In this case you could point out both the addition of the <v-app> and why it is needed. Otherwise it would be far too easy for someone to look at this and notice instead your incorrect spelling of column and think that what was what you were trying to convey.

Start asking to get answers

Find the answer to your question by asking.

Ask question

Explore related questions

See similar questions with these tags.