[Vue warn]: Unknown custom element: <data-view-sidebar> - did you register the component correctly? For recursive components, make sure to provide the "name" option.

[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option. found in

---> at src/views/pages/owner/Pelanggan.vue at src/layouts/main/Main.vue at src/App.vue

DataViewSidebarPelanggan.vue

<component :is="scrollbarTag" class="scroll-area--data-list-add-new" :settings="settings" :key="$vs.rtl">

  <div class="p-6">

   <vs-input icon-pack="feather" icon="icon-briefcase" label-placeholder="Judul Toko" class="w-full mt-8" />

              <vs-input icon-pack="feather" v-model="dataTagline" name="item-tagline" icon="icon-briefcase" label-placeholder="Tagline" class="w-full mt-8" />

              <vs-input icon-pack="feather"  v-model="dataWA" name="item-wa" icon="icon-briefcase" label-placeholder="Nomor Whatsapp" class="w-full mt-8" />

              <vs-input icon-pack="feather"  v-model="dataGreeting" name="item-greeting" icon="icon-briefcase" label-placeholder="Whatsapp Greeting" class="w-full mt-8" />

              <vs-input icon-pack="feather"  v-model="dataJarak" name="item-jarak" icon="icon-briefcase" label-placeholder="Maksimal Jarak Kirim" class="w-full mt-8" />

              <label class="text-sm mt-8 mb-3 flex">Whatsapp Checkout</label>
              <vs-radio v-model="shiping" color="success" class="mr-5" vs-value="free">Free</vs-radio>
              <vs-radio v-model="shiping" color="success" class="mr-5" vs-value="flat">Flat</vs-radio>
              <vs-radio v-model="shiping" color="success" class="mr-5" vs-value="radius">Radius</vs-radio>
              <vs-radio v-model="shiping" color="success" class="mr-5" vs-value="rajaongkir">Rajaongkir</vs-radio>

              <vs-input icon-pack="feather" v-model="dataRata" name="item-rata" icon="icon-briefcase" label-placeholder="Biaya Kirim Sama Rata" class="w-full mt-8" />

              <vs-input icon-pack="feather" v-model="dataRadius" name="item-radius" icon="icon-briefcase" label-placeholder="Biaya Kirim Berdasarkan Radius" class="w-full mt-8" />

              <vs-input icon-pack="feather" v-model="dataFb" name="item-fb" icon="icon-briefcase" label-placeholder="Link Facebook Page" class="w-full mt-8" />

              <vs-input icon-pack="feather" v-model="dataIg" name="item-ig" icon="icon-briefcase" label-placeholder="Instagram Username" class="w-full mt-8" />
  </div>
</component>

<div class="flex flex-wrap items-center p-6" slot="footer">
  <vs-button class="mr-6" @click="submitData" :disabled="!isFormValid">Buat</vs-button>
  <vs-button type="border" color="danger" @click="isSidebarActiveLocal = false">Batal</vs-button>
</div>

Pelanggan.vue

<data-view-sidebar :isSidebarActive="addNewDataSidebar" @closeSidebar="toggleDataSidebar" :data="sidebarData" />

<vs-table ref="table" multiple v-model="selected" pagination :max-items="itemsPerPage" search :data="products">

  <div slot="header" class="flex flex-wrap-reverse items-center flex-grow justify-between">

    <div class="flex flex-wrap-reverse items-center">

      <!-- ACTION - DROPDOWN -->
      <vs-dropdown vs-trigger-click class="cursor-pointer mr-4 mb-4">

        <div class="p-4 shadow-drop rounded-lg d-theme-dark-bg cursor-pointer flex items-center justify-center text-lg font-medium w-32">
          <span class="mr-2">Actions</span>
          <feather-icon icon="ChevronDownIcon" svgClasses="h-4 w-4" />
        </div>

        <vs-dropdown-menu>

          <vs-dropdown-item>
            <span class="flex items-center">
              <feather-icon icon="TrashIcon" svgClasses="h-4 w-4" class="mr-2" />
              <span>Delete</span>
            </span>
          </vs-dropdown-item>

          <vs-dropdown-item>
            <span class="flex items-center">
              <feather-icon icon="FileIcon" svgClasses="h-4 w-4" class="mr-2" />
              <span>Print</span>
            </span>
          </vs-dropdown-item>

        </vs-dropdown-menu>
      </vs-dropdown>

      <!-- ADD NEW -->
      <div class="p-3 mb-4 mr-4 rounded-lg cursor-pointer flex items-center justify-between text-lg font-medium text-base text-white bg-primary" @click="addNewData">
          <feather-icon icon="PlusIcon" svgClasses="h-4 w-4" />
          <span class="ml-2 text-base text-white">Tambah Pelanggan</span>
      </div>

    </div>


    <!-- ITEMS PER PAGE -->
    <vs-dropdown vs-trigger-click class="cursor-pointer mb-4 mr-4">
      <div class="p-4 border border-solid d-theme-border-grey-light rounded-full d-theme-dark-bg cursor-pointer flex items-center justify-between font-medium">
        <span class="mr-2">{{ currentPage * itemsPerPage - (itemsPerPage - 1) }} - {{ products.length - currentPage * itemsPerPage > 0 ? currentPage * itemsPerPage : products.length }} of {{ queriedItems }}</span>
        <feather-icon icon="ChevronDownIcon" svgClasses="h-4 w-4" />
      </div>
      <!-- <vs-button class="btn-drop" type="line" color="primary" icon-pack="feather" icon="icon-chevron-down"></vs-button> -->
      <vs-dropdown-menu>

        <vs-dropdown-item @click="itemsPerPage=4">
          <span>4</span>
        </vs-dropdown-item>
        <vs-dropdown-item @click="itemsPerPage=10">
          <span>10</span>
        </vs-dropdown-item>
        <vs-dropdown-item @click="itemsPerPage=15">
          <span>15</span>
        </vs-dropdown-item>
        <vs-dropdown-item @click="itemsPerPage=20">
          <span>20</span>
        </vs-dropdown-item>
      </vs-dropdown-menu>
    </vs-dropdown>
  </div>

  <template slot="thead">
    <vs-th>Gambar</vs-th>
    <vs-th sort-key="namapeg">Nama Pelanggan</vs-th>
    <vs-th sort-key="hp">No HP</vs-th>
    <vs-th sort-key="email">Email</vs-th>
    <vs-th sort-key="long">Longitude</vs-th>
    <vs-th sort-key="lat">Latitude</vs-th>
    <vs-th sort-key="jk">Jenis Kelamin</vs-th>
    <vs-th sort-key="jk">Tanggal Lahir</vs-th>
    <vs-th sort-key="jk">Tanggal Lahir</vs-th>
    <vs-th>Action</vs-th>
  </template>d

  <template slot-scope="{data}">
    <tbody>
      <vs-tr :data="tr" :key="indextr" v-for="(tr, indextr) in data">

        <vs-td class="img-container">
          <img :src="tr.img" class="product-img" />
        </vs-td>

        <vs-td>
          <p class="product-name font-medium truncate">{{ tr.namapeg }}</p>
        </vs-td>

        <vs-td>
          <p class="product-category">{{ tr.hp }}</p>
        </vs-td>

        <vs-td>
          <p class="product-category">{{ tr.jabatan }}</p>
        </vs-td>

        <vs-td>
          <vs-chip :color="getJumlahColor(tr.jumlah)" class="product-jumlah">{{ tr.jumlah | title }}</vs-chip>
        </vs-td>

        <vs-td>
          <p class="product-price">IDR{{ tr.price }}</p>
        </vs-td>

        <vs-td class="whitespace-no-wrap">
          <feather-icon icon="EditIcon" svgClasses="w-5 h-5 hover:text-primary stroke-current" @click.stop="editData(tr)" />
          <feather-icon icon="TrashIcon" svgClasses="w-5 h-5 hover:text-danger stroke-current" class="ml-2" @click.stop="deleteData(tr.id)" />
        </vs-td>

      </vs-tr>
    </tbody>
  </template>
</vs-table>