I'm currently experimenting with incorporating Bootstrap 5 into Vue (2.x) without relying on any third-party libraries. My approach involves creating a custom wrapper for select Bootstrap components that I intend to utilize.
For guidance, I've been referencing the following StackOverflow thread: Using Bootstrap 5 with Vue 3
The initial component I tackled is bootstrap.Alert, and so far, it's performing perfectly.
<template>
<div ref="el" class="alert alert-danger alert-dismissible fade show" role="alert">
<div>{{ message }}</div>
<button type="button" class="btn-close" data-bs-dismiss="alert" aria-label="Close"></button>
</div>
</template>
<script>
import { Alert } from 'bootstrap';
export default {
name: 'BootstrapAlert',
props: {
message: {
type: String,
default: '',
},
},
created() {
Alert(this.$refs.el);
},
mounted() {
const { el } = this.$refs;
[
'close',
'closed',
].forEach((e) => {
el.addEventListener(`${e}.bs.alert`, () => {
this.$emit(e);
});
});
},
};
</script>
The next component on my list is bootstrap.Toast, which has presented some challenges:
<template>
<div ref="el" class="toast" role="alert" aria-live="assertive" aria-atomic="true">
<div class="toast-header">
<strong class="me-auto">Bootstrap</strong>
<small class="text-muted">just now</small>
<button type="button" class="btn-close" data-bs-dismiss="toast" aria-label="Close"></button>
</div>
<div class="toast-body">See? Just like this.</div>
</div>
</template>
<script>
import { Toast } from 'bootstrap';
export default {
name: 'BootstrapToast',
created() {
Toast(this.$refs.el);
},
};
Despite the fact that the implementation/code is nearly identical, I consistently encounter the same error message when attempting to render the Toast component:
[Vue warn]: Error in created hook: "TypeError: Cannot read property '_getConfig' of undefined"
When I attempt to relocate the Toast initialization from the created event to the mounted event, a different error emerges:
[Vue warn]: Error in mounted hook: "TypeError: Cannot set property '_element' of undefined"
Does anyone have insights into what might be causing these issues?
Thank you in advance!
=== POTENTIAL SOLUTION ===
<script>
import { Toast } from 'bootstrap';
export default {
name: 'BootstrapToast',
data() {
return {
toast: null,
};
},
mounted() {
this.toast = new Toast(this.$refs.el);
this.toast.show();
},
};