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

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

Below are my codes.

app.js

Vueponent('form-to-do', require('./ponents/formToDo.vue').default);
Vueponent('modal-alert', require('./ponents/modalAlert.vue').default);

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

formToDo.Vue

<template>
// form 

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

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

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

    data() {
        return {
            setErrors: [],
            tasks: [],
            task: {
                id: '',
                name: '',
                pleted: '',
                date_pleted: ''
            },
            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>

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

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

Below are my codes.

app.js

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

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

formToDo.Vue

<template>
// form 

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

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

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

    data() {
        return {
            setErrors: [],
            tasks: [],
            task: {
                id: '',
                name: '',
                pleted: '',
                date_pleted: ''
            },
            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>

• javascript
• html
• vue.js

1 Answer 1

Your ponents are probably in the same folder. In your ponent formToDo.vue: Change this:

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

To this:

import modalAlert from './modalAlert.vue';

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

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