I am facing an issue with Vue3 (Vite) and Bootstrap 5 while trying to create a modal that can be called by code. The problem arises when I attempt to open the modal from its parent component.
Bootstrap has been properly installed and included in my project:
import bootstrap (main.js)
Adding
import bootstrap/dist/js/bootstrapI have created a basic modal that listens for a prop to determine when to open it.
However, upon opening the modal, the following error is thrown:
Uncaught (in promise) TypeError: Cannot read properties of undefined (reading 'backdrop')<template>
<div class="modal" tabindex="-1" id="errModal" aria-labelledby="ErrorModalLabel" aria-hidden="true">
<div class="modal-dialog">
<div class="modal-content">
<div class="modal-header">
<h5 class="modal-title">Error {{ this.occurred }}</h5>
<button type="button" class="btn-close" data-bs-dismiss="modal"
aria-label="ErrorModalLabel"></button>
</div>
<div class="modal-body">
<p>{{ this.error_message }}</p>
</div>
<div class="modal-footer">
<button type="button" class="btn btn-secondary" data-bs-dismiss="modal">OK</button>
</div>
</div>
</div>
</div>
</template>
<script>
import { Modal } from "bootstrap"
export default {
props: {
occurred: String,
error_message: String,
show: Boolean,
},
components: {
myModal: null
},
data() {
return {
}
},
methods: {
},
mounted() {
this.myModal = new Modal(document.getElementById('errModal'))
},
watch: {
show: function (newVal, oldVal) { // watching it
this.cam_prop = newVal.properties
},
}
};
</script>
Calling the Modal from Parent Component:
<RegIdentErrorModalVue id="#ErrModal" :show="this.error" :occurred="'Identification'" :error_message="this.error_text">
</RegIdentErrorModalVue>
Attempting to create the Modal using new bootstrap.Modal results in an error (bootstrap not defined).
I suspect the issue might be related to importing, as styling works but functionality is affected. Could it possibly be due to Vite?