Friday, February 23, 2024
 Popular · Latest · Hot · Upcoming
16
rated 0 times [  21] [ 5]  / answers: 1 / hits: 5137  / 4 Years ago, sat, october 19, 2019, 12:00:00

I am new in Vue.js. I want to understand on using component. I tried to import my component to another component but it failed. I am using Laravel 5.8. Below are the error that I received.




Module not found: Error: Can't resolve
'./components/modalAlert.vue




Below are my codes.



app.js



Vue.component('form-to-do', require('./components/formToDo.vue').default);
Vue.component('modal-alert', require('./components/modalAlert.vue').default);

const app = new Vue({
el: '#app',
});


formToDo.Vue



<template>
// form

<modal-alert></modal-alert>
</template>

<script>
import modalAlert from './components/modalAlert.vue';

export default {
components: {
'modal-alert': modalAlert
},

data() {
return {
setErrors: [],
tasks: [],
task: {
id: '',
name: '',
completed: '',
date_completed: ''
},
result: '',
input: {
name: ''
}
};
},
}
</script>


modalAlert.vue



<template>
<div class=modal fade id=exampleModal tabindex=-1 role=dialog aria-labelledby=exampleModalLabel aria-hidden=true>
<div class=modal-dialog role=document>
<div class=modal-content>
<div class=modal-header>
<h5 class=modal-title id=exampleModalLabel>Modal title</h5>
<button type=button class=close data-dismiss=modal aria-label=Close>
<span aria-hidden=true>&times;</span>
</button>
</div>
<div class=modal-body>
Test
</div>
<div class=modal-footer>
<button type=button class=btn btn-secondary data-dismiss=modal>Close</button>
<button type=button class=btn btn-primary>Save changes</button>
</div>
</div>
</div>
</div>
</template>

<script>
export default {
props: ['id'],
data() {
return {

}
},

mounted() {
console.log('Component mounted.')
}
}
</script>

More From » html

 Answers
12

Your components are probably in the same folder. In your component formToDo.vue:
Change this:



import modalAlert from './components/modalAlert.vue';


To this:



import modalAlert from './modalAlert.vue';


To solve the other issue, as @ambianBeing suggested, your component formToDo.vue must have root element to be able to add child component inside it.



<template>
<div> <!-- this is the root -->
<modal-alert></modal-alert>
</div>
</template>

[#5880] Thursday, October 17, 2019, 4 Years  [reply] [flag answer]
Only authorized users can answer the question. Please sign in first, or register a free account.
travion

Total Points: 137
Total Questions: 96
Total Answers: 103

Location: India
Member since Wed, Aug 4, 2021
3 Years ago
travion questions
Mon, Dec 16, 19, 00:00, 4 Years ago
Fri, Sep 20, 19, 00:00, 5 Years ago
Wed, Nov 14, 18, 00:00, 5 Years ago
Sun, Oct 28, 18, 00:00, 5 Years ago
Sun, Oct 28, 18, 00:00, 5 Years ago
;