为什么我不能再次将组件导入到 VUE 中？

Question

this is the structure of my project

src
  components
         create.vue
         resume.vue
         service.vue
  shared
         header.vue
         menu.vue
         loader.vue
         footer.vue

this is my loader component

<template>
    <div class="three col">
        <!-- <div class="loader" id="spinner"></div> -->
        <div class="loader" id="spinner-2">
          <span></span>
          <span></span>
          <span></span>
        </div>
    </div>
</template>

<script>
export default {
  name: 'Loader',
    
}
</script>

and I have it imported and running on my component create.vue

<template>
              <div v-show="formInfo.selectedId != ''">
                <h1 class="title">What's the name of your
                  <span>{{idName}}</span> ?
                </h1>
                <input
                type="text"
                class="form-control"
                v-model="formInfo.name"
                @keypress="onChangeName($event)"
                @keyup="onChangeName($event)"
                />
                <div class="loader-spinner" v-if="loading">
                  <ciev-app-loader>
                </div>
              </div>

</template>
<script>
import Loader from '../shared/loader.vue'

export default {
  data() {
    return {
      step: 1,
      specieName: "",
      breedName: "",
      animalName: "",
      breedId: 0,
      imageSelected: false,
      isFormCompleted: false,
      isBreedSelected: false,
      loading: false,
      isLoaderFinished: false,
      myTimeout: 0
    };
  },
  components: {
    'ciev-app-loader': Loader
  },

up to this point everything works fine, but now I want to reuse the component Loader in my component resume.vue. I import it and declare it in the template as follows

<template>
      <div
        v-show="!displayUnknown"
        class="column"
        v-bind:class="{ paymentIsActive: 'payment' === selectedResume }"
        @click="onClickResume('payment')"
      >
        <label>
          <input
            type="radio"
            name="selectedResume"
            value="payment"
            v-model="selectedResume"
          />
          <i class="icon-card"></i>
        </label>
      </div>

    <div class="loader-spinner">
      <ciev-app-loader />
    </div>




</template>

<script>
import globalAxios from "axios";
import { isMobile } from "mobile-device-detect";
import Config from "./../../config.js";
import FileSaver from 'file-saver';
import { saveAs } from 'file-saver';
import Loader from '../shared/loader.vue'

export default {
  data() {
    return {
      step: 3,
      selectedResume: "",
      selectedCremationService: null,
      focusService: undefined,
      selectedServicePrice: 0.0,
      displayResume: false,
      displayUnknown: false,
      offer: "unknown",
      isMobile: isMobile ? true : false,
    };
  },
  components: {
    'ciev-app-loader': Loader
  },
</script>

The Loader component is not shown in the template, although inspecting elements in the browser does load it, and it returns me by console the following error "[Vue warn]: Unknown custom element: - did you register the component correctly? For recursive components, make sure to provide the "name" option."

Looking at references to the same error, I have declared the name on the component porpio when exporting it, but I think I have already done it in the Loader. What am I doing wrong?

Thank you all for your time and help in advance.

Answer 1

The root <div> seems to have closed incorrectly in the resume.vue component. Correct it and try again.

 <div
        v-show="!displayUnknown"
        class="column"
        v-bind:class="{ paymentIsActive: 'payment' === selectedResume }"
        @click="onClickResume('payment')"
      >
        <label>
          <input
            type="radio"
            name="selectedResume"
            value="payment"
            v-model="selectedResume"
          />
          <i class="icon-card"></i>
        </label>

    <div class="loader-spinner">
      <ciev-app-loader />
    </div>
</div>

Answer 2

checking my code carefully the error was that besides declaring in the script the components object with the declaration of the imported component I had declared it in duplicate at the end of the script as an empty object and this generated the error. thanks for your help