vue.js - <v-card> - did you register the component correctly?

Question

I'm new in Vuetify and Vue.js.

I try to make v-card layout but failed.

Be honest i copy paste this code :

https://github.com/vuetifyjs/vuetifyjs.com/blob/master/src/examples/layouts/centered.vue

And when i run i get error :

vue.runtime.esm.js?2b0e:587 [Vue warn]: Unknown custom element: <v-card> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Login> at src/views/Login.vue
       <VApp>
         <App> at src/App.vue
           <Root>

I already install vuetify but still error. Any solution ?

Updated :

If i import the vuetify, i get another error : import of entire module vuetify not allowed due to preventFullImport setting

Answer 1

If you used the vue-cli-3, you probably had the choice at some point to choose between "à la carte" or full import. You can either, use it to import the components you need or remove "à la carte" :

• Import vcard component in src/plugins/vuetify.js with something like :

  import Vue from "vue";
  import {
      Vuetify,
      VApp,
      VCard,
      /* other imports ... */
  } from "vuetify";
  import "vuetify/src/stylus/app.styl";
  
  Vue.use(Vuetify, {
      components: {
          VApp,
          VCard,
         /* other imports */
      },
      /* theme option */
  });
  

• Remove the "à la carte" import by modifying the /babel.config.js file :

  plugins: [
      [
        "transform-imports",
        {
          vuetify: {
            transform: "vuetify/es5/components/${member}",
            /* change the preventFullImport property to false */
            preventFullImport: true
          }
        }
      ]
    ]