[Vue warn]: Failed to resolve component:

Question

I just tried to make a single login form in Vue but it returns

[Vue warn]: Failed to resolve component: v-text-field

and

[Vue warn]: Failed to resolve component: v-form

the code in login component:

<template lang="html">
    
  <div>
    <v-form>
      <v-text-field v-model="loginInfo.username" label="Username"/>
      <v-text-field v-model="loginInfo.password" label="Password"/>
      <v-btn>Login</v-btn>
    </v-form>
  </div>
    
</template>
    
<script>
  export default {
    data() {
      return{
        loginInfo: {
           username:'',
           password:'',
        }
      }
    },
  }
</script>

Answer 1

I see two options to answer the question:

Either you use Vuetify.js as you are trying to in the code provided above. I would recommend checking if you are using Vuetify.js correctly by following the quick start guide.

The other option would be not to use Vuetify.js and therefor use the regular HTML expressions in the form:

<div>
    <form>
      <label for="username">Username</label>
      <input id="username" type="text" v-model="loginInfo.username"/>
      <label for="password">Password</Label>
      <input id="password" type="password" v-model="loginInfo.password"/>
      <input type="submit"value="Login" />
    </form>
</div>

Answer 2

I got the same issue and put around 2 hours to figure out. The only problem with me was my browser was getting the cached js file that did not have my required component.