Vue error: unknown custom element

Witajcie,
Uczę się VUE w połączeniu z Laravelem: https://www.tutsmake.com/laravel-vue-js-datatables-example-tutorial/

Mam plik: 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>

oraz 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>

Kiedy uruchamiam aplikację otrzymuję w przeglądarce błąd:

    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.

W jaki sposób mogę to naprawić?

Bardzo proszę o pomoc

Zamiast

components: { VuejsDatatableFactory },

Ma być:

import Vue from 'vue';
import { VuejsDatatableFactory } from 'vuejs-datatable';
Vue.use( VuejsDatatableFactory );

Źródło: https://www.npmjs.com/package/vuejs-datatable

@Markuz: Dziękuję za pomoc :)
Mam jeszcze jeden problem.

Zrobiłem sobie komponent.

Mam pliki:

1. Notes.vue:

<div class="flex-center position-ref full-height">
<div class="container">
  <data-table
    fetch-url="@datatTableUrl"
    :columns="['name', 'email', 'id' , 'created_at']"
  ></data-table>
</div>
</div>
<script>
import Vue from 'vue';

export default {
  data() {
    return {
      datatTableUrl: '',
    }
  },
  created: function () {
    this.datatTableUrl = Vue.prototype.$apiAdress + '/api/users/dataTable' + '?token=' + localStorage.getItem("api_token");
  },
}
</script>

2. components/DataTable.vue:

<template>
  <div class="data-table">
    <div class="main-table">
      <table class="table">
        <thead>
        <tr>
          <th class="table-head">#</th>
          <th v-for="column in columns" :key="column" @click="sortByColumn(column)"
              class="table-head">
            {{ column | columnHead }}
            <span v-if="column === sortedColumn">
                            <i v-if="order === 'asc' " class="fas fa-arrow-up"></i>
                            <i v-else class="fas fa-arrow-down"></i>
            </span>
          </th>
        </tr>
        </thead>
        <tbody>
        <tr class="" v-if="tableData.length === 0">
          <td class="lead text-center" :colspan="columns.length + 1">No data found.</td>
        </tr>
        <tr v-for="(data, key1) in tableData" :key="data.id" class="m-datatable__row" v-else>
          <td>{{ serialNumber(key1) }}</td>
          <td v-for="(value, key) in data">{{ value }}</td>
        </tr>
        </tbody>
      </table>
    </div>
    <nav v-if="pagination && tableData.length > 0">
      <ul class="pagination">
        <li class="page-item" :class="{'disabled' : currentPage === 1}">
          <a class="page-link" href="#" @click.prevent="changePage(currentPage - 1)">Previous</a>
        </li>
        <li v-for="page in pagesNumber" class="page-item"
            :class="{'active': page == pagination.meta.current_page}">
          <a href="javascript:void(0)" @click.prevent="changePage(page)" class="page-link">{{ page }}</a>
        </li>
        <li class="page-item" :class="{'disabled': currentPage === pagination.meta.last_page }">
          <a class="page-link" href="#" @click.prevent="changePage(currentPage + 1)">Next</a>
        </li>
        <span style="margin-top: 8px;"> &nbsp; <i>Displaying {{ pagination.data.length }} of {{ pagination.meta.total }} entries.</i></span>
      </ul>
    </nav>
  </div>
</template>

<script type="text/ecmascript-6">
import axios from 'axios';
import Vue from 'vue';
import 'vuejs-datatable/dist/themes/bootstrap-4.esm';
import {
  VuejsDatatableFactory,
  IDataFnParams,
  IDisplayHandlerParam,
  ITableContentParam,
  TColumnsDefinition,
  VueDatatable
} from 'vuejs-datatable';

Vue.use(VuejsDatatableFactory, VueDatatable);


export default {
  props: {
    fetchUrl: {type: String, required: true},
    columns: {type: Array, required: true},
  },
  data() {
    return {
      tableData: [],
      url: '',
      pagination: {
        meta: {to: 1, from: 1}
      },
      offset: 4,
      currentPage: 1,
      perPage: 5,
      sortedColumn: this.columns[0],
      order: 'asc'
    }
  },
  watch: {
    fetchUrl: {
      handler: function (fetchUrl) {
        this.url = fetchUrl
      },
      immediate: true
    }
  },
  created() {
    return this.fetchData()
  },
  computed: {
    /**
     * Get the pages number array for displaying in the pagination.
     * */
    pagesNumber() {
      if (!this.pagination.meta.to) {
        return []
      }
      let from = this.pagination.meta.current_page - this.offset
      if (from < 1) {
        from = 1
      }
      let to = from + (this.offset * 2)
      if (to >= this.pagination.meta.last_page) {
        to = this.pagination.meta.last_page
      }
      let pagesArray = []
      for (let page = from; page <= to; page++) {
        pagesArray.push(page)
      }
      return pagesArray
    },
    /**
     * Get the total data displayed in the current page.
     * */
    totalData() {
      return (this.pagination.meta.to - this.pagination.meta.from) + 1
    }
  },
  methods: {
    fetchData() {
      let dataFetchUrl = `${this.url}?page=${this.currentPage}&column=${this.sortedColumn}&order=${this.order}&per_page=${this.perPage}`
      axios.get(dataFetchUrl)
        .then(({data}) => {
          this.pagination = data
          this.tableData = data.data
        }).catch(error => this.tableData = [])
    },
    /**
     * Get the serial number.
     * @param key
     * */
    serialNumber(key) {
      return (this.currentPage - 1) * this.perPage + 1 + key
    },
    /**
     * Change the page.
     * @param pageNumber
     */
    changePage(pageNumber) {
      this.currentPage = pageNumber
      this.fetchData()
    },
    /**
     * Sort the data by column.
     * */
    sortByColumn(column) {
      if (column === this.sortedColumn) {
        this.order = (this.order === 'asc') ? 'desc' : 'asc'
      } else {
        this.sortedColumn = column
        this.order = 'asc'
      }
      this.fetchData()
    }
  },
  filters: {
    columnHead(value) {
      return value.split('_').join(' ').toUpperCase()
    }
  },
  name: 'DataTable'
}
</script>

<style scoped>
</style>

3. Main.js:

import 'core-js/stable'
import Vue from 'vue'
import CoreuiVue from '@coreui/vue'
import App from './App'
import router from './router/index'
import { iconsSet as icons } from './assets/icons/icons.js'
import store from './store'
import vuexI18n from 'vuex-i18n';
import Locales from './locale/vue-i18n-locales.generated.js';
// import "bootstrap";
// import "bootstrap/dist/css/bootstrap.css";
import DataTable from './components/DataTable'


Vue.prototype.$apiAdress = 'https://earmon.dev:8890'
Vue.use(CoreuiVue)
Vue.use(vuexI18n.plugin, store);
Vue.i18n.add('en', Locales.en);
Vue.i18n.add('pl', Locales.pl);
let locale = 'pl'
if(typeof localStorage.locale !== 'undefined'){
  locale = localStorage.getItem("locale")
}
Vue.i18n.set(locale);

new Vue({
  el: '#app',
  router,
  store,
  //CIcon component documentation: https://coreui.io/vue/docs/components/icon
  icons,
  template: '<App/>',
  components: {
    App, DataTable
  }
})

Kiedy uruchamiamn stronę otrzymuję błąd:

[Vue warn]: Failed to mount component: template or render function not defined.

found in

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

Dlaczego? Robię według tego tutoriala: https://sadhakbj.medium.com/create-dynamic-data-table-component-with-laravel-and-vue-js-part-1-d1799677b539

Brakuje Ci znacznika <template> w Notes.vue