After a few days of learning vue.js, I decided to implement a custom toast function based on the official bootstrap-vue documentation: . I successfully created toasts using component instance injection and custom components in Vue. However, my goal now is to create a custom toast using an independent JavaScript function or file so that I can call it dynamically.
The code snippet from Cart.vue where I used injection:
<script>
export default {
methods: {
purchaseHandler() {
this.$bvToast.toast('The item added to your cart', {
title: 'Notification',
variant: 'success',
solid: true
})
},
},
};
</script>
I then created a custom-toast.js as a standalone JavaScript function/file and imported the necessary plugin as per the documentation:
import Vue from 'vue'
import { ToastPlugin } from 'bootstrap-vue'
Vue.use(ToastPlugin)
export default () => {
this.$bvToast.toast('Toast body content', {
title: 'Toast test',
variant: 'success',
solid: true
})
}
Incorporating custom-toast.js into my Cart.vue file resulted in the following structure:
<script>
import customToast from "./custom-toast";
export default {
methods: {
purchaseHandler() {
customToast()
},
};
</script>
However, an error occurred:
[Vue warn]: Error in v-on handler: "TypeError: Cannot read property '$bvToast' of undefined"
TypeError: Cannot read property '$bvToast' of undefined
I tried to find the equivalent of this.$bvToast injection in the separate JavaScript file but was unsuccessful due to my limited knowledge of Vue.js. My main questions are:
- What is the equivalent of this.$bvToast or any bootstrap-vue injection in a standalone JavaScript file?
- How can I resolve this issue?
Thank you for your help. Apologies for any language errors.