Here is the project structure:
src
components
create.vue
resume.vue
service.vue
shared
header.vue
menu.vue
loader.vue
footer.vue
This is the Loader component:
<template>
<div class="three col">
<div class="loader" id="spinner-2">
<span></span>
<span></span>
<span></span>
</div>
</div>
</template>
<script>
export default {
name: 'Loader',
}
</script>
I have imported and implemented the Loader component in my create.vue component. Here's how I did it:
<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
},
Now, I want to reuse the Loader component in my resume.vue component. After importing it and declaring it in the template, the Loader component is not being displayed. Instead, I get an error message in the console:
Looking at other instances of this error, I have made sure to declare the name option when exporting the component, but the issue persists with the Loader component. What could be causing this problem?
Thank you for your assistance.