Explore Our Templates 🚀
Notification
This plugin is a delightful, easy to use and highly configurable component to help you notify your users out of the box. No messy setup, just beautiful notifications! check documentation.
Contextual Notification
It uses the structure of default alerts in notification popup.
<button id="primary_notification" class="btn btn-primary">Primary Message</button>
<button id="warning_notification" class="btn btn-warning">Warning Message</button>
<button id="danger_notification" class="btn btn-danger">Danger Message</button>
<button id="info_notification" class="btn btn-info">Info Message</button>
<button id="success_notification" class="btn btn-success">Success Message</button><!-- Bootstrap Notify JS -->
<script src="dist/js/bootstrap-notify.min.js"></script>
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
delay:50000000
});
$('#primary_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "primary",
allow_dismiss:false
});
});
$('#warning_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "warning",
allow_dismiss:false
});
});
$('#info_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "info",
allow_dismiss:false
});
});
$('#success_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "success",
allow_dismiss:false
});
});
$('#danger_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "danger",
allow_dismiss:false
});
});<template>
<div>
<BButton
variant="primary"
@click="showNotification('default', 'Primary Notification', 'top-right')"
>
Primary Message
</BButton>
<BButton
variant="warning"
@click="showNotification('warning', 'Warning Notification', 'top-right')"
>
Warning Message
</BButton>
<BButton
variant="danger"
@click="showNotification('error', 'Error Notification', 'top-right')"
>
Danger Message
</BButton>
<BButton
variant="info"
@click="showNotification('info', 'Info Notification', 'top-right')"
>
Info Message
</BButton>
<BButton
variant="success"
@click="showNotification('success', 'Success Notification', 'top-right')"
>
Success Message
</BButton>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = (type, Msg, position) => {
toast(Msg, {
type: type,
position: position,
hideProgressBar: true,
closeButton: false,
icon: false,
});
};
return { showNotification };
},
};
</script><template>
<div>
<BButton
variant="primary"
@click="showNotification('default', 'Primary Notification', 'top-right')"
>
Primary Message
</BButton>
<BButton
variant="warning"
@click="showNotification('warning', 'Warning Notification', 'top-right')"
>
Warning Message
</BButton>
<BButton
variant="danger"
@click="showNotification('error', 'Error Notification', 'top-right')"
>
Danger Message
</BButton>
<BButton
variant="info"
@click="showNotification('info', 'Info Notification', 'top-right')"
>
Info Message
</BButton>
<BButton
variant="success"
@click="showNotification('success', 'Success Notification', 'top-right')"
>
Success Message
</BButton>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = (type, Msg, position) => {
toast(Msg, {
type: type,
position: position,
hideProgressBar: true,
closeButton: false,
icon: false,
});
};
return { showNotification };
},
};
</script><button id="primary_notification" class="btn btn-primary">Primary Message</button>
<button id="warning_notification" class="btn btn-warning">Warning Message</button>
<button id="danger_notification" class="btn btn-danger">Danger Message</button>
<button id="info_notification" class="btn btn-info">Info Message</button>
<button id="success_notification" class="btn btn-success">Success Message</button>Dismissible Notification
In dismissible notification user can dismiss the alert notifications.
<button id="d_primary_notification" class="btn btn-primary">Primary Message</button>
<button id="d_warning_notification" class="btn btn-warning">Warning Message</button>
<button id="d_danger_notification" class="btn btn-danger">Danger Message</button>
<button id="d_info_notification" class="btn btn-info">Info Message</button>
<button id="d_success_notification" class="btn btn-success">Success Message</button>$('#d_primary_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
});
});
$('#d_warning_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-warning",
});
});
$('#d_info_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-info",
});
});
$('#d_success_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-success",
});
});
$('#d_danger_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-danger",
});
});<template>
<div>
<BButton
variant="primary"
@click="showNotification('default', 'Primary Notification', 'top-right')"
>
Primary Message
</BButton>
<BButton
variant="warning"
@click="showNotification('warning', 'Warning Notification', 'top-right')"
>
Warning Message
</BButton>
<BButton
variant="danger"
@click="showNotification('error', 'Error Notification', 'top-right')"
>
Danger Message
</BButton>
<BButton
variant="info"
@click="showNotification('info', 'Info Notification', 'top-right')"
>
Info Message
</BButton>
<BButton
variant="success"
@click="showNotification('success', 'Success Notification', 'top-right')"
>
Success Message
</BButton>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = (type, Msg, position) => {
toast(Msg, {
type: type,
position: position,
hideProgressBar: true,
closeButton: false,
timeout: 10000,
});
};
return { showNotification };
},
};
</script><template>
<div>
<BButton
variant="primary"
@click="showNotification('default', 'Primary Notification', 'top-right')"
>
Primary Message
</BButton>
<BButton
variant="warning"
@click="showNotification('warning', 'Warning Notification', 'top-right')"
>
Warning Message
</BButton>
<BButton
variant="danger"
@click="showNotification('error', 'Error Notification', 'top-right')"
>
Danger Message
</BButton>
<BButton
variant="info"
@click="showNotification('info', 'Info Notification', 'top-right')"
>
Info Message
</BButton>
<BButton
variant="success"
@click="showNotification('success', 'Success Notification', 'top-right')"
>
Success Message
</BButton>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = (type, Msg, position) => {
toast(Msg, {
type: type,
position: position,
hideProgressBar: true,
closeButton: false,
timeout: 10000,
});
};
return { showNotification };
},
};
</script><button id="d_primary_notification" class="btn btn-primary">Primary Message</button>
<button id="d_warning_notification" class="btn btn-warning">Warning Message</button>
<button id="d_danger_notification" class="btn btn-danger">Danger Message</button>
<button id="d_info_notification" class="btn btn-info">Info Message</button>
<button id="d_success_notification" class="btn btn-success">Success Message</button>Position
You can change the position of notification according to your requirement.
<button id="top_right_pos" class="btn btn-primary">Top Right</button>
<button id="bottom_right_pos" class="btn btn-warning">Bottom Right</button>
<button id="top_left_pos" class="btn btn-danger">Top Left</button>
<button id="top_center_pos" class="btn btn-info">Top Center</button>
<button id="bottom_left_pos" class="btn btn-success">bottom Left</button>
<button id="bottom_center_pos" class="btn btn-pink">bottom Center</button>$('#top_right_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "right"
},
});
});
$('#bottom_right_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "right"
},
});
});
$('#top_left_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "left"
},
});
});
$('#bottom_left_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "left"
},
});
});
$('#bottom_center_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInUp',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "center"
},
});
});
$('#top_center_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "center"
},
});
});<template>
<div>
<BButton
variant="primary"
@click="showNotification('Notification on top right', 'top-right')"
>
Top Right
</BButton>
<BButton
variant="warning"
@click="showNotification('Notification on bottom right', 'bottom-right')"
>
Bottom Right
</BButton>
<BButton
variant="danger"
@click="showNotification('Notification on top left', 'top-left')"
>
Top Left
</BButton>
<BButton
variant="info"
@click="showNotification('Notification on top center', 'top-center')"
>
Top Center
</BButton>
<BButton
variant="success"
@click="showNotification('Notification on bottom left', 'bottom-left')"
>
bottom Left
</BButton>
<BButton
variant="gradient-primary"
@click="showNotification('Notification on bottom center', 'bottom-center')"
>
bottom Center
</BButton>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = (Msg, position) => {
toast(Msg, {
type: variant,
position: position,
// hideProgressBar: false,
// closeButton: "button",
});
};
return { showNotification };
},
};
</script><template>
<div>
<BButton
variant="primary"
@click="showNotification('Notification on top right', 'top-right')"
>
Top Right
</BButton>
<BButton
variant="warning"
@click="showNotification('Notification on bottom right', 'bottom-right')"
>
Bottom Right
</BButton>
<BButton
variant="danger"
@click="showNotification('Notification on top left', 'top-left')"
>
Top Left
</BButton>
<BButton
variant="info"
@click="showNotification('Notification on top center', 'top-center')"
>
Top Center
</BButton>
<BButton
variant="success"
@click="showNotification('Notification on bottom left', 'bottom-left')"
>
bottom Left
</BButton>
<BButton
variant="gradient-primary"
@click="showNotification('Notification on bottom center', 'bottom-center')"
>
bottom Center
</BButton>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = (Msg, position) => {
toast(Msg, {
type: variant,
position: position,
// hideProgressBar: false,
// closeButton: "button",
});
};
return { showNotification };
},
};
</script><button id="top_right_pos" class="btn btn-primary">Top Right</button>
<button id="bottom_right_pos" class="btn btn-warning">Bottom Right</button>
<button id="top_left_pos" class="btn btn-danger">Top Left</button>
<button id="top_center_pos" class="btn btn-info">Top Center</button>
<button id="bottom_left_pos" class="btn btn-success">bottom Left</button>
<button id="bottom_center_pos" class="btn btn-pink">bottom Center</button>Animation
You can add animate.css animations.
<button id="top_right_pos" class="btn btn-primary">Top Right</button>
<button id="bottom_right_pos" class="btn btn-warning">Bottom Right</button>
<button id="top_left_pos" class="btn btn-danger">Top Left</button>
<button id="top_center_pos" class="btn btn-info">Top Center</button>
<button id="bottom_left_pos" class="btn btn-success">bottom Left</button>
<button id="bottom_center_pos" class="btn btn-pink">bottom Center</button>$('#top_right_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "right"
},
});
});
$('#bottom_right_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "right"
},
});
});
$('#top_left_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "left"
},
});
});
$('#bottom_left_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "left"
},
});
});
$('#bottom_center_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInUp',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "center"
},
});
});
$('#top_center_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "center"
},
});
});<!-- *************** Custom Alert Component (CustomAlertWithTitle.vue) *************** -->
<template>
<div>
<h4 class="alert-heading">
<span class="me-2"> <i class="fa fa-twitter"></i></span>Follow!
</h4>
<p>
Check out my twitter account by clicking on this
<a
href="XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
className="alert-link"
target="_blank"
rel="noreferrer"
>
notification!
</a>
</p>
</div>
</template>
<!-- **************************** /Custom Alert Component **************************** -->
<template>
<BButton variant="primary" @click="showNotification">Demo</BButton>
</template>
<script>
import { useToast } from "vue-toastification";
import CustomAlertWithTitle from "./CustomAlertWithTitle.vue";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = () => {
toast(CustomAlertWithTitle, {
type: "default",
position: "top-right",
icon: false,
hideProgressBar: true,
toastClassName: "alert alert-primary p-4",
closeButtonClassName: "text-primary",
});
};
return { showNotification };
},
};
</script><!-- *************** Custom Alert Component (CustomAlertWithTitle.vue) *************** -->
<template>
<div>
<h4 class="alert-heading">
<span class="me-2"> <i class="fa fa-twitter"></i></span>Follow!
</h4>
<p>
Check out my twitter account by clicking on this
<a
href="XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
className="alert-link"
target="_blank"
rel="noreferrer"
>
notification!
</a>
</p>
</div>
</template>
<!-- **************************** /Custom Alert Component **************************** -->
<template>
<BButton variant="primary" @click="showNotification">Demo</BButton>
</template>
<script>
import { useToast } from "vue-toastification";
import CustomAlertWithTitle from "./CustomAlertWithTitle.vue";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = () => {
toast(CustomAlertWithTitle, {
type: "default",
position: "top-right",
icon: false,
hideProgressBar: true,
toastClassName: "alert alert-primary p-4",
closeButtonClassName: "text-primary",
});
};
return { showNotification };
},
};
</script><button id="top_right_pos" class="btn btn-primary">Top Right</button>
<button id="bottom_right_pos" class="btn btn-warning">Bottom Right</button>
<button id="top_left_pos" class="btn btn-danger">Top Left</button>
<button id="top_center_pos" class="btn btn-info">Top Center</button>
<button id="bottom_left_pos" class="btn btn-success">bottom Left</button>
<button id="bottom_center_pos" class="btn btn-pink">bottom Center</button>Custom URL
You can provide custom URLs inside notifications.
<button id="d_primary_notification" class="btn btn-primary">Primary Message</button>
<button id="d_warning_notification" class="btn btn-warning">Warning Message</button>
<button id="d_danger_notification" class="btn btn-danger">Danger Message</button>
<button id="d_info_notification" class="btn btn-info">Info Message</button>
<button id="d_success_notification" class="btn btn-success">Success Message</button>$('#d_primary_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
});
});
$('#d_warning_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-warning",
});
});
$('#d_info_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-info",
});
});
$('#d_success_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-success",
});
});
$('#d_danger_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-danger",
});
});<!-- Custom Alert Component (CustomAlert.vue) -->
<template>
<p>
Check out my twitter account by clicking on this
<a
href="https://twitter.com/hencework"
className="alert-link"
target="_blank"
rel="noreferrer"
>
notification!
</a>
</p>
</template>
<!-- /Custom Alert Component -->
<template>
<div>
<BButton variant="primary" @click="showNotification">Custom URL</BButton>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
import CustomAlert from "./CustomAlert.vue";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = () => {
toast(CustomAlert, {
type: "default",
position: "top-right",
icon: false,
hideProgressBar: true,
toastClassName: "alert alert-primary p-4",
closeButtonClassName: "text-primary",
});
};
return { showNotification };
},
};
</script><!-- Custom Alert Component (CustomAlert.vue) -->
<template>
<p>
Check out my twitter account by clicking on this
<a
href="https://twitter.com/hencework"
className="alert-link"
target="_blank"
rel="noreferrer"
>
notification!
</a>
</p>
</template>
<!-- /Custom Alert Component -->
<template>
<div>
<BButton variant="primary" @click="showNotification">Custom URL</BButton>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
import CustomAlert from "./CustomAlert.vue";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = () => {
toast(CustomAlert, {
type: "default",
position: "top-right",
icon: false,
hideProgressBar: true,
toastClassName: "alert alert-primary p-4",
closeButtonClassName: "text-primary",
});
};
return { showNotification };
},
};
</script><button id="d_primary_notification" class="btn btn-primary">Primary Message</button>
<button id="d_warning_notification" class="btn btn-warning">Warning Message</button>
<button id="d_danger_notification" class="btn btn-danger">Danger Message</button>
<button id="d_info_notification" class="btn btn-info">Info Message</button>
<button id="d_success_notification" class="btn btn-success">Success Message</button>Icon
Icon can improves the notifications.
<button id="top_right_pos" class="btn btn-primary">Top Right</button>
<button id="bottom_right_pos" class="btn btn-warning">Bottom Right</button>
<button id="top_left_pos" class="btn btn-danger">Top Left</button>
<button id="top_center_pos" class="btn btn-info">Top Center</button>
<button id="bottom_left_pos" class="btn btn-success">bottom Left</button>
<button id="bottom_center_pos" class="btn btn-pink">bottom Center</button>$('#top_right_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "right"
},
});
});
$('#bottom_right_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "right"
},
});
});
$('#top_left_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "left"
},
});
});
$('#bottom_left_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "left"
},
});
});
$('#bottom_center_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInUp',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "bottom",
align: "center"
},
});
});
$('#top_center_pos').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
placement: {
from: "top",
align: "center"
},
});
});<template>
<div>
<BButton variant="primary" @click="showNotification">Icon</BButton>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
import CustomAlert from "./CustomAlert.vue";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = () => {
toast(CustomAlert, {
type: "default",
position: "top-right",
icon: "fa fa-twitter",
hideProgressBar: true,
toastClassName: "alert alert-primary p-4",
closeButtonClassName: "text-primary",
});
};
return { showNotification };
},
};
</script><template>
<div>
<BButton variant="primary" @click="showNotification">Icon</BButton>
</div>
</template>
<script>
import { useToast } from "vue-toastification";
import CustomAlert from "./CustomAlert.vue";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = () => {
toast(CustomAlert, {
type: "default",
position: "top-right",
icon: "fa fa-twitter",
hideProgressBar: true,
toastClassName: "alert alert-primary p-4",
closeButtonClassName: "text-primary",
});
};
return { showNotification };
},
};
</script><button id="top_right_pos" class="btn btn-primary">Top Right</button>
<button id="bottom_right_pos" class="btn btn-warning">Bottom Right</button>
<button id="top_left_pos" class="btn btn-danger">Top Left</button>
<button id="top_center_pos" class="btn btn-info">Top Center</button>
<button id="bottom_left_pos" class="btn btn-success">bottom Left</button>
<button id="bottom_center_pos" class="btn btn-pink">bottom Center</button>With Title
You can add titles inside notifications.
<button id="primary_notification" class="btn btn-primary">Primary Message</button>
<button id="warning_notification" class="btn btn-warning">Warning Message</button>
<button id="danger_notification" class="btn btn-danger">Danger Message</button>
<button id="info_notification" class="btn btn-info">Info Message</button>
<button id="success_notification" class="btn btn-success">Success Message</button><!-- Bootstrap Notify JS -->
<script src="dist/js/bootstrap-notify.min.js"></script>
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "dismissible alert-primary",
delay:50000000
});
$('#primary_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "primary",
allow_dismiss:false
});
});
$('#warning_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "warning",
allow_dismiss:false
});
});
$('#info_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "info",
allow_dismiss:false
});
});
$('#success_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "success",
allow_dismiss:false
});
});
$('#danger_notification').on('click', function(event) {
event.preventDefault();
setTimeout(function(){
$('.alert.alert-dismissible .close').addClass('btn-close').removeClass('close');
},100);
$.notify("Enter: Bounce In from TopExit: Bounce Up and Out", {
animate: {
enter: 'animated bounceInDown',
exit: 'animated bounceOutUp'
},
type: "danger",
allow_dismiss:false
});
});<!-- *************** Custom Alert Component (CustomAlertWithTitle.vue) *************** -->
<template>
<div>
<h4 class="alert-heading">
<span class="me-2"> <i class="fa fa-twitter"></i></span>Follow!
</h4>
<p>
Check out my twitter account by clicking on this
<a
href="XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
className="alert-link"
target="_blank"
rel="noreferrer"
>
notification!
</a>
</p>
</div>
</template>
<!-- **************************** /Custom Alert Component **************************** -->
<template>
<BButton variant="primary" @click="showNotification">Demo</BButton>
</template>
<script>
import { useToast } from "vue-toastification";
import CustomAlertWithTitle from "./CustomAlertWithTitle.vue";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = () => {
toast(CustomAlertWithTitle, {
type: "default",
position: "top-right",
icon: false,
hideProgressBar: true,
toastClassName: "alert alert-primary p-4",
closeButtonClassName: "text-primary",
});
};
return { showNotification };
},
};
</script><!-- *************** Custom Alert Component (CustomAlertWithTitle.vue) *************** -->
<template>
<div>
<h4 class="alert-heading">
<span class="me-2"> <i class="fa fa-twitter"></i></span>Follow!
</h4>
<p>
Check out my twitter account by clicking on this
<a
href="XXXXXXXXXXXXXXXXXXXXXXXXXXXXX"
className="alert-link"
target="_blank"
rel="noreferrer"
>
notification!
</a>
</p>
</div>
</template>
<!-- **************************** /Custom Alert Component **************************** -->
<template>
<BButton variant="primary" @click="showNotification">Demo</BButton>
</template>
<script>
import { useToast } from "vue-toastification";
import CustomAlertWithTitle from "./CustomAlertWithTitle.vue";
export default {
setup() {
// Get toast interface
const toast = useToast();
const showNotification = () => {
toast(CustomAlertWithTitle, {
type: "default",
position: "top-right",
icon: false,
hideProgressBar: true,
toastClassName: "alert alert-primary p-4",
closeButtonClassName: "text-primary",
});
};
return { showNotification };
},
};
</script><button id="primary_notification" class="btn btn-primary">Primary Message</button>
<button id="warning_notification" class="btn btn-warning">Warning Message</button>
<button id="danger_notification" class="btn btn-danger">Danger Message</button>
<button id="info_notification" class="btn btn-info">Info Message</button>
<button id="success_notification" class="btn btn-success">Success Message</button>