Vuetifyjs error Unknown custom element: did you register the component correctly

Question

Am using vuetify to build a template but am getting an error

unknown custom element dashboard did you register the component correctly?

This is my code:

In the main.js
import Vue from 'vue'
import App from './App.vue'
import Vuetify from 'vuetify'
 import VueRouter from 'vue-router';
 import {routes} from './routes';

  Vue.use(VueRouter);

  Vue.use(Vuetify)

 new Vue({
  el: '#app',
  render: h => h(App)
})

In my App.vue

<template>
  <dashboard></dashboard>

 </template>
<script>
 import Dashbaord from './components/dashboard/Dashboard.vue';
   export default {
  name: "appinit",
  components: {
   "dashboard":Dashboard
  }
}

And here is my dashboard

<template>
<v-app>
    <left-drawer></left-drawer>
    <toolbar></toolbar> <!-- Dashboard Toolbar-->
    <main>
      <v-container fluid>
        ..info are
        </v-slide-y-transition>
      </v-container>
    </main>
  <right-drawer></right-drawer>
  <footer-area></footer-area>
</v-app>
</template>

  <script>
  imports  ......

 export default {
   components: {
    Toolbar, RightDrawer,LeftDrawer,FooterArea
   }
 }

What could be wrong as i have just separated the initial vuefy installation component into different component sections

The code is available at github on This link

What could be wrong?

Answer 1

You have few issues in your code.

1. You have to close tag in App.vue
2. Fix typo App.vue line 6 "Dashboard"
3. Remove footer-area from Dashboard.Vue (you don't have that component, yet ;) )