Vue Js Toast Notification:Vue.js toast notification is a lightweight and versatile plugin that allows developers to display non-intrusive messages to users. With just a few lines of code, developers can create and customize stylish notifications that pop up briefly and fade away. Vue.js toast notification provides various options such as position, duration, and animation, making it easy to adapt to different user interfaces. It can be used to inform users about successful actions, errors, or any other important updates.
Vue Js Toast Notification Example
<div id="app">
<div v-if="show" class="toast">
<span>{{ message }}</span>
<button class="close-button" @click="hideToast">×</button>
</div>
</div>
<script type="module">
const app = new Vue({
el: "#app",
data() {
return {
show: false,
message: ''
};
},
methods: {
showToast(message, duration = 5000) {
this.message = message;
this.show = true;
setTimeout(() => {
this.hideToast();
}, duration);
},
hideToast() {
this.show = false;
}
},
mounted() {
this.showToast('Toast successfully created')
}
});
</script>
<style scoped>
.toast {
position: fixed;
bottom: 20px;
left: 20px;
background-color: #333;
color: #fff;
padding: 10px;
border-radius: 4px;
display: flex;
align-items: center;
transition: opacity 0.3s ease-in-out;
}
.close-button {
margin-left: 10px;
border: none;
background: transparent;
color: #fff;
font-size: 16px;
cursor: pointer;
}
</style>
Output of Vue Js Toast Notification
Here are five different styles for toast notifications using CSS
These are five different styles for Vue.js toast notifications using CSS: success toast, error toast, warning toast, info toast, and custom toast. Each style has its unique background color and close button color to visually represent different types of notifications.
Success Vue Js Toast Notification Example
<div id="app">
<h3>Success Vue Js Toast Notification</h3>
<div v-if="show" class="toast success">
<span>{{ message }}</span>
<button class="close-button" @click="hideToast">×</button>
</div>
</div>
<script>
const app = new Vue({
el: "#app",
data() {
return {
show: false,
message: ''
};
},
methods: {
showToast(message, duration = 5000) {
this.message = message;
this.show = true;
setTimeout(() => {
this.hideToast();
}, duration);
},
hideToast() {
this.show = false;
}
},
mounted() {
this.showToast('Toast successfully created')
}
});
</script>
<style scoped>
.toast.success {
background-color: #28a745;
color: #fff;
}
.toast.success .close-button {
color: #fff;
}
.toast {
position: fixed;
bottom: 20px;
left: 20px;
padding: 10px;
border-radius: 4px;
display: flex;
align-items: center;
transition: opacity 0.3s ease-in-out;
}
.close-button {
margin-left: 10px;
border: none;
background: transparent;
color: #fff;
font-size: 16px;
cursor: pointer;
}
</style>
Output of Vue Js Success Toast Notification
How can I create an error toast notification using Vue js?
The Below code represents a Vue.js component for a toast notification. The component has a conditional rendering based on the “show” property. When “show” is true, it displays a toast notification with an error style. The notification includes a message and a close button. The CSS styles define the background color and text color for the error toast.
Error Vue Js Toast Notification Example
<div id="app">
<div v-if="show" class="toast error">
<span>{{ message }}</span>
<button class="close-button" @click="hideToast">×</button>
</div>
</div>
<style scoped>
.toast.error {
background-color: #dc3545;
}
.toast.error .close-button {
color: #fff;
}
</style>
Output of Vue Js Error Toast Notification
Warning Vue Js Toast Notification Example
<div id="app">
<h3>Warning Vue Js Toast Notification Example</h3>
<div v-if="show" class="toast warning">
<span>{{ message }}</span>
<button class="close-button" @click="hideToast">×</button>
</div>
</div>
<style scoped>
.toast.warning {
background-color: #ffc107;
}
.toast.warning .close-button {
color: #333;
}
</style>
Output of Vue Js Warning Toast Notification
Info Vue Js Toast Notification Example
<div id="app">
<h3>Info Vue Js Toast Notification Example</h3>
<div v-if="show" class="toast info">
<span>{{ message }}</span>
<button class="close-button" @click="hideToast">×</button>
</div>
</div>
<style scoped>
.toast.info {
background-color: #17a2b8;
}
.toast.info .close-button {
color: #fff;
}
</style>
Output of Vue Js info Notification
Custom Vue Js Toast Notification Example
<div id="app">
<h3>Custom Vue Js Toast Notification Example</h3>
<div v-if="show" class="toast custom">
<span>{{ message }}</span>
<button class="close-button" @click="hideToast">×</button>
</div>
</div>
<style scoped>
.toast.custom {
background-color: #ffa500;
}
.toast.custom .close-button {
color: #333;
}
</style>
Output of Vue Js Custom Toast Notification
