Vue error when run my code: unknown custom element-CodePudding

I'm very beginner web developer. I try make CRUD. I have Laravel and Vue project. I install https://www.tutsmake.com/laravel-vue-js-datatables-example-tutorial/

I need add to my project Datatable.

I have my file with datatable: Note.vue:

<template>
  <div class="container">
    <div class="row justify-content-center">
      <div class="col-md-8">
        <div class="card">
          <div class="card-header">Laravel Vue Datatables Component Example - ItSolutionStuff.com</div>

          <div class="card-body">
            <datatable :columns="columns" :data="rows"></datatable>
            <datatable-pager v-model="page" type="abbreviated" :per-page="per_page"></datatable-pager>

          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import axios from 'axios';
import Vue from 'vue';
import { VuejsDatatableFactory } from 'vuejs-datatable';

export default {
  components: { VuejsDatatableFactory },
  mounted() {
    console.log('Component mounted.')
  },
  data(){
    return {
      datatTableUrl:  Vue.prototype.$apiAdress,
      columns: [
        {label: 'id', field: 'id'},
        {label: 'Name', field: 'name'},
        {label: 'Email', field: 'email'}
      ],
      rows: [],
      page: 1,
      per_page: 10,
    }
  },
  methods:{
    getUsers: function() {
      axios.get(this.datatTableUrl).then(function(response){
        this.rows = response.data;
      }.bind(this));
    }
  },
  created: function(){
    this.datatTableUrl = this.datatTableUrl '/api/users/dataTable'  '?token='   localStorage.getItem("api_token");
    this.getUsers()
  }
}
</script>

and App.vue:

<template>
  <router-view></router-view>
</template>

<script>
export default {
  name: 'App'
}
</script>

<style lang="scss">
  // Import Main styles for this application
  @import 'assets/scss/style';
</style>

<style scoped>
.invalid input,
.invalid textarea,
.invalid select,
.invalid checkbox,
.invalid .cke_chrome {
  border: 1px solid red !important;
}

</style>

When I run my code I have errors:

vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <datatable> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Notes> at src/views/notes/Notes.vue
       <Anonymous>
         <CWrapper>
           <TheContainer> at src/containers/TheContainer.vue
             <App> at src/App.vue
               <Root>

Show 91 more frames
vue.esm.js?a026:628 [Vue warn]: Unknown custom element: <datatable-pager> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

found in

---> <Notes> at src/views/notes/Notes.vue
       <Anonymous>
         <CWrapper>
           <TheContainer> at src/containers/TheContainer.vue
             <App> at src/App.vue
               <Root>

Notes.vue?50c2:27 Component mounted.

What's is wrong?

Please help me :)

CodePudding user response：

If you're using a component within a component (it's like DOM) than you have to register these components global:

like for example:

vue.component("MyComponent", MyComponent)

This should solve your problem!