[Vue warn]: Unknown custom element: <v-col> (vuetify)

Question

I’m a beginner in Vue.js and I’m trying to create a search application. I’m using the vuetify library and I’m having the following error:

[Vue warn]: Unknown custom element: v-col - Did you Register the Component correctly? For recursive Components, make sure to provide the "name" option.

My code is this::

SCRIPT:

import axios from 'axios';

export default {
  data() {
    return {
      users:[],
      filteredUsers:[],
      searchName: '',
      birthMonth:'',
      birthMonthChoice:[
        {num:'01', month:'Janeiro'},
        {num:'02', month:'Fevereiro'},
        {num:'03', month:'Março'},
        {num:'04', month:'Abril'},
        {num:'05', month:'Maio'},
        {num:'06', month:'Junho'},
        {num:'07', month:'Julho'},
        {num:'08', month:'Agosto'},
        {num:'09', month:'Setembro'},
        {num:'10', month:'Outubro'},
        {num:'11', month:'Novembro'},
        {num:'12', month:'Dezembro'},
      ],
      departament:'',
      departaments:[
        'RH',
        'T.I',
        'Telemarketing'
        ],
    }
  },
  mounted() {
    axios.get('users')
    .then(response => {
      this.users = response.data;
      this.filteredUsers = response.data;
    })
    .catch(error => console.log(error))
  },

  computed: {
    searchUsers() {
      let users = this.users;
      let searchName = this.searchName.trim().toLowerCase();
      users = users.filter(function(item){
        if(item.name.toLowerCase().indexOf(searchName) !== -1){
          return item;
        }
      })
      return users;
    },
  },

TEMPLATE:

<v-flex d-flex lg12 sm12 xs12 >
            <v-col class="d-flex" cols="12" sm="6">
              <v-select  v-model="departament" :items="departaments" label="Departamento" :clearable="true" solo></v-select>
            </v-col>
            <v-col class="d-flex" cols="12" sm="6">
              <v-select v-model="birthMonth" :items="birthMonthChoice" @change="getBirthMonth" item-text="month" item-value="num" label="Mês do Aniversario" :clearable="true" solo return-object>
              </v-select>
            </v-col> 
</v-flex>
<v-card class="mx-auto" max-width="250" v-for="user in searchUsers" :key="user.id" outlined>
          <v-img class="white--text align-end" height="100px" width="250px" src="https://cdn.vuetifyjs.com/images/cards/docks.jpg"></v-img>
          <v-card-title class="pb-0">{{user.name}}</v-card-title>
          <v-card-text class="text--primary">
            <div>E-mail: {{user.email}}</div>
            <div>Data de Aniversário: {{user.birthdate}}</div>
          </v-card-text>
        </v-card>

Main.js:

import Vue from "vue";
import App from "./App";
import router from "./router";
import store from "./store/index";
import ApiService from "./api/api.service";

import "vuetify/dist/vuetify.min.css";
import "font-awesome/css/font-awesome.css";

import Vuetify from "vuetify";

import Vuex from "vuex";

setupComponents(Vue);

Vue.use(Vuetify);
Vue.use(Vuex);
ApiService.init();

import moment from "moment";
Vue.prototype.moment = moment;

/* eslint-disable no-new */
new Vue({
  el: "#app",
  router,
  store,
  components: { App },
  template: "<App/>",
  data: {
  }
});

App.Vue

<template>
  <div @mousedown="wasClicked()">
    <template v-if="!$route.meta.allowAnonymous">
      <v-app id="inspire">
        <div class="app-container">
          <toolbar @toggleNavigationBar="drawer = !drawer" />
          <navigation :toggle="drawer" />
          <v-content>
            <breadcrumbs />
            <router-view />
            <page-footer />
          </v-content>
        </div>
      </v-app>
    </template>
    <template v-else>
      <transition>
        <keep-alive>
          <router-view></router-view>
        </keep-alive>
      </transition>
    </template>
    <loader></loader>
  </div>
</template>

<script>
import moment from "moment";
import Loader from "./components/Loader";
export default {
  name: "App",
  components: { Loader },
  data() {
    return {
      drawer: true,
      loader: true
    };
  },

Any idea what is causing this error?

Answer 1

As @guastallaigor and @Guilherme Nascimento pointed out in the comments, v-col had not yet been implemented in version 1.5 of vuetify, it was implemented starting with version 2.x .

The problem was solved by upgrading the library to 2.x