Interactive Toasts in Vue Bootstrap

Toasts are mini popups containing information. We can use these toasts for notifications. You can place them in various parts of your screen. Below is a super quick setup to begin implementing interactive toasts. Vue Bootstrap has a nice library to help us create these toasts. Learn more about toasts at: https://bootstrap-vue.org/docs/components/toast

  1. Install vue bootstrap
npm install vue bootstrap bootstrap-vue

2. Make can make a simple toast like this

this.$bvToast.toast('yourBodyText', {
title: 'yourTitleText',
toaster: 'b-toaster-bottom-right',
solid: true,
appendToast: true
})

3. If we want to make an interactive toast (for accessibility reasons, Vue Bootstrap does not recommend making toasts interactive), we need to pass a component into the toast. First, I will create a super simple component called “TestButton.” If the user clicks on this button, the user will be routed to the ‘/home’ page

<template>
<div @click="navigate('/home')">
test
</div>
</template>
<script>
export default {
props: ['type'],
methods: {
navigate(path) {
this.$router.push(path);
},
}
}
</script>

4. Second, we need to create a virtual element based on this component so that we can pass it into the toast. We call this.$createElement() and pass in our component with our props. Then, we pass in our virtual element into this.$bvToast.toast(). Now, if the user clicks on the body, the user will be routed to ‘/home.’

const virtualElement = this.$createElement(ToastButton, {
props: {
type: 'testing'
}
})
this.$bvToast.toast([virtualElement], {
title: payload.notification.title,
toaster: 'b-toaster-bottom-right',
solid: true,
appendToast: true
})

Get the Medium app

A button that says 'Download on the App Store', and if clicked it will lead you to the iOS App store
A button that says 'Get it on, Google Play', and if clicked it will lead you to the Google Play store