How to Create Toast Notification in Vue: Simple Guide

To create a toast notification in Vue, define a reactive state to control the message and visibility, then create a component that shows the message briefly. Use setTimeout to hide the toast after a few seconds and bind the visibility with v-if or v-show.

Syntax

A toast notification in Vue typically involves a reactive state for the message and visibility, a component template to display the message, and a method to show and hide the toast.

• data(): holds the toast message and visibility flag.
• methods: functions to trigger the toast and hide it after a delay.
• template: HTML structure that conditionally renders the toast.

vue

<template>
  <div v-if="visible" class="toast">{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const message = ref('')

function showToast(msg) {
  message.value = msg
  visible.value = true
  setTimeout(() => {
    visible.value = false
  }, 3000)
}
</script>

<style>
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
}
</style>

Output

A small dark box with white text appears at the bottom-right corner of the screen showing the toast message for 3 seconds.

Example

This example shows a Vue component with a button that triggers a toast notification. The toast appears with a message and disappears after 3 seconds.

vue

<template>
  <button @click="showToast('Hello from Vue toast!')">Show Toast</button>
  <div v-if="visible" class="toast">{{ message }}</div>
</template>

<script setup>
import { ref } from 'vue'

const visible = ref(false)
const message = ref('')

function showToast(msg) {
  message.value = msg
  visible.value = true
  setTimeout(() => {
    visible.value = false
  }, 3000)
}
</script>

<style>
.toast {
  position: fixed;
  bottom: 20px;
  right: 20px;
  background-color: #333;
  color: white;
  padding: 1rem 1.5rem;
  border-radius: 0.5rem;
  box-shadow: 0 2px 8px rgba(0,0,0,0.3);
  transition: opacity 0.3s ease;
}
button {
  padding: 0.5rem 1rem;
  font-size: 1rem;
  cursor: pointer;
}
</style>

Output

When clicking the button, a dark toast box with white text 'Hello from Vue toast!' appears at the bottom-right corner for 3 seconds then fades away.

Common Pitfalls

Common mistakes when creating toast notifications in Vue include:

• Not using reactive state, so the toast does not update or disappear correctly.
• Forgetting to clear the timeout, causing multiple toasts to overlap or stay visible.
• Using v-show instead of v-if without hiding the toast properly, which can cause accessibility issues.
• Not styling the toast for visibility and positioning, making it hard to notice.

vue

<!-- Wrong: Using non-reactive variables -->
<script setup>
let visible = false
let message = ''
function showToast(msg) {
  message = msg
  visible = true
  setTimeout(() => {
    visible = false
  }, 3000)
}
</script>

<!-- Right: Use ref for reactivity -->
<script setup>
import { ref } from 'vue'
const visible = ref(false)
const message = ref('')
function showToast(msg) {
  message.value = msg
  visible.value = true
  setTimeout(() => {
    visible.value = false
  }, 3000)
}
</script>

Quick Reference

Tips for creating toast notifications in Vue:

• Use ref to create reactive state for visibility and message.
• Use v-if to conditionally render the toast for better performance and accessibility.
• Use setTimeout to hide the toast after a few seconds automatically.
• Style the toast with fixed position and clear colors for visibility.
• Trigger the toast from any method or event handler by updating the reactive state.

Key Takeaways

Use Vue's reactive refs to control toast visibility and message content.

Show the toast with v-if and hide it automatically using setTimeout.

Style the toast with fixed position and contrasting colors for clear visibility.

Avoid non-reactive variables to ensure the toast updates and disappears correctly.

Trigger toast notifications from any event by updating the reactive state.