Hey there! Are you looking to add some sleek and stylish notifications to your Vue JS project? Well, you're in the right place! In this step-by-step guide, I'll show you how to display Toastr notifications using Bootstrap Vue JS.
Toastr notifications are those cool little pop-ups that appear at the corner of your screen, providing important updates or alerts to your users.
So, let's see how to display toastr notification in bootstrap vue js, toastr notification in vue.js, bootstrap 5 toast vue 3, vue 3 toastr notification, and bootstrap toastr notification.
By the end of this tutorial, you'll be able to effortlessly integrate Toastr notifications into your project.
First things first, make sure you have Bootstrap Vue installed in your project. If not, you can easily add it using npm.
npm install vue bootstrap-vue bootstrap
Now, let's use the b-toast component to display Toastr notifications in your Vue component.
<template>
<div class="p-3 bg-secondary progress-bar-striped" style="min-height: 170px;">
<b-button class="mb-2" variant="primary" @click="$bvToast.show('example-toast')">
Show toast
</b-button>
<b-toast id="example-toast" title="BootstrapVue" static no-auto-hide>
Hello, world! This is a toast message.
</b-toast>
</div>
</template>
You can customize Toastr notifications by adding additional options to the b-toast component.
<b-toast id="example-toast" title="Custom Title" static no-auto-hide variant="info">
Hello, world! This is a custom toast message.
</b-toast>
Generate a dynamic toast from anywhere in your app via the this.$bvToast Vue component instance injection, without the need to place a <b-toast> component in your app.
<template>
<div>
<b-button @click="makeToast()">Show Toast</b-button>
<b-button @click="makeToast(true)">Show Toast (appended)</b-button>
</div>
</template>
<script>
export default {
data() {
return {
toastCount: 0
}
},
methods: {
makeToast(append = false) {
this.toastCount++
this.$bvToast.toast(`This is toast number ${this.toastCount}`, {
title: 'BootstrapVue Toast',
autoHideDelay: 5000,
appendToast: append
})
}
}
}
</script>
Once a toast which was generated using this.$bvToast.toast() has been hidden, it will automatically be destroyed and removed from the document.
BootstrapVue toasts provides custom CSS to define color variants. Variants follow the standard Bootstrap v4 variant names.
<template>
<div>
<b-button @click="makeToast()" class="mb-2">Default</b-button>
<b-button variant="primary" @click="makeToast('primary')" class="mb-2">Primary</b-button>
<b-button variant="secondary" @click="makeToast('secondary')" class="mb-2">Secondary</b-button>
<b-button variant="danger" @click="makeToast('danger')" class="mb-2">Danger</b-button>
<b-button variant="warning" @click="makeToast('warning')" class="mb-2">Warning</b-button>
<b-button variant="success" @click="makeToast('success')" class="mb-2">Success</b-button>
<b-button variant="info" @click="makeToast('info')" class="mb-2">Info</b-button>
</div>
</template>
<script>
export default {
methods: {
makeToast(variant = null) {
this.$bvToast.toast('Toast body content', {
title: `Variant ${variant || 'default'}`,
variant: variant,
solid: true
})
}
}
}
</script>
BootstrapVue comes with the following "built-in" toaster names (and associated styles defined in SCSS):
<template>
<div>
<b-button @click="toast('b-toaster-top-right')" class="mb-2">b-toaster-top-right</b-button>
<b-button @click="toast('b-toaster-top-left')" class="mb-2">b-toaster-top-left</b-button>
<b-button @click="toast('b-toaster-top-center')" class="mb-2">b-toaster-top-center</b-button>
<b-button @click="toast('b-toaster-top-full')" class="mb-2">b-toaster-top-full</b-button>
<b-button @click="toast('b-toaster-bottom-right', true)" class="mb-2">b-toaster-bottom-right</b-button>
<b-button @click="toast('b-toaster-bottom-left', true)" class="mb-2">b-toaster-bottom-left</b-button>
<b-button @click="toast('b-toaster-bottom-center', true)" class="mb-2">b-toaster-bottom-center</b-button>
<b-button @click="toast('b-toaster-bottom-full', true)" class="mb-2">b-toaster-bottom-full</b-button>
</div>
</template>
<script>
export default {
data() {
return {
counter: 0
}
},
methods: {
toast(toaster, append = false) {
this.counter++
this.$bvToast.toast(`Toast ${this.counter} body content`, {
title: `Toaster ${toaster}`,
toaster: toaster,
solid: true,
appendToast: append
})
}
}
}
</script>
Toasts have a close button to hide them on use click by default. Setting the no-close-button prop to true will prevent this and creates a toast without the default close button.
<template>
<div>
<b-button @click="showToast">Show Toast</b-button>
</div>
</template>
<script>
export default {
data() {
return {
count: 0
}
},
methods: {
showToast() {
// Use a shorter name for `this.$createElement`
const h = this.$createElement
// Create a ID with a incremented count
const id = `my-toast-${this.count++}`
// Create the custom close button
const $closeButton = h(
'b-button',
{
on: { click: () => this.$bvToast.hide(id) }
},
'Close'
)
// Create the toast
this.$bvToast.toast([$closeButton], {
id: id,
title: `Toast ${this.count}`,
noCloseButton: true
})
}
}
}
</script>
Output:
And that's it! You've successfully integrated Toastr notifications into your Vue JS project using Bootstrap Vue JS's b-toast component.
You might also like:
- Read Also: Laravel 10 Toastr Notification Example
- Read Also: How to Display Tooltip in Bootstrap Vue JS
- Read Also: How to Create Toast Notification in React Native App
- Read Also: Laravel 10 REST API Authentication using Sanctum