Custom Toasters in Nuxt with Vue Toastification
Customizing Vue Toastification in Nuxt 3
In this article, we’ll explore how to integrate and customize Vue Toastification in a Nuxt 3 application. We’ll create a reusable toaster plugin and demonstrate how to trigger different types of toast notifications from your components.
Step 1: Setting Up Vue Toastification
First, ensure you have installed the Vue Toastification library in your Nuxt 3 project. You can do this using npm or yarn:
npm install @meforma/vue-toaster
yarn add @meforma/vue-toaster
Step 2: Creating the Toaster Plugin
Next, we’ll create a plugin that initializes the toaster with custom settings. Create a new file in the plugins directory (e.g., toast.client.ts):
/plugins/toast.client.ts
import { createToaster } from '@meforma/vue-toaster'
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((nuxtApp) => {
const toaster = createToaster({
position: 'bottom-left',
maxToasts: 5, // Display at most 5 toasts at a time
})
})
Great! You’ve set up the basic integration for Vue Toastification in your Nuxt 3 project. Now, let’s dive into how you can customize the toaster to fit your specific needs.
Key Areas of Customization
Positioning
Types and Styles
Duration
1. Positioning
You’ve already set the default position to bottom-left. However, Vue Toastification offers multiple predefined positions. You can easily change this by passing a different value to the position option.
Available positions:
top-right
top-left
bottom-right
bottom-left
const toaster = createToaster({
position: 'bottom-left', // Change the position here
});
2. Types, Styles, Durations
You can customize the appearance of the toasts based on the type of message (e.g., success, error, warning). You can pass custom classes to modify the toast’s look:
/plugins/toast.client.ts
import { createToaster } from '@meforma/vue-toaster'
import { defineNuxtPlugin } from '#app'
export default defineNuxtPlugin((nuxtApp) => {
const toaster = createToaster({
position: 'bottom-left',
})
// Define custom toast functions
const successToast = (message: string) => {
toaster.show(message, {
type: 'success',
duration: 3000,
className: 'bg-green-500 text-white p-4 rounded shadow-md w-[300px] my-2',
})
}
const failToast = (message: string) => {
toaster.show(message, {
type: 'error',
duration: 3000,
className: 'bg-red-500 text-white p-4 rounded shadow-md w-[300px] my-2',
})
}
const warnToast = (message: string) => {
toaster.show(message, {
type: 'warning',
duration: 3000,
className: 'bg-yellow-500 text-white p-4 rounded shadow-md w-[300px] my-2',
})
}
// Provide the toasts globally with types
nuxtApp.provide('successToast', successToast)
nuxtApp.provide('failToast', failToast)
nuxtApp.provide('warnToast', warnToast)
})
Usage in a Page
To display toast notifications with button actions, you can set up buttons to trigger success, error, and warning toasts. Here’s the code:
/pages/toast.vue
<template>
<div class="flex justify-center space-x-4 h-10">
<button @click="$successToast('Operation was successful!')" class="bg-primary text-white px-4">Success</button>
<button @click="$failToast('Something went wrong!')" class="bg-red-800 text-white px-4">Fail</button>
<button @click="$warnToast('This is a warning!')" class="bg-orange-400 text-white px-4">Warn</button>
</div>
</template>
<script setup>
const { $successToast, $failToast, $warnToast } = useNuxtApp();
</script>
For more customization,
/pages/toast.vue
import { createToaster } from '@meforma/vue-toaster'
import { defineNuxtPlugin } from '#app'
import successImg from '@/assets/images/success.svg'
export default defineNuxtPlugin((nuxtApp) => {
const toaster = createToaster({
position: 'bottom-left',
maxToasts: 5,
})
// toast with icon
const successToast = (message: string) => {
toaster.show(`
<div class="flex items-center">
<img src="${successImg}" alt="success" class="w-5 h-5 mr-2" />
${message}
</div>
`, {
type: 'success',
pauseOnHover: true,
duration: 3000,
className: 'bg-white text-xs text-gray-800 p-4 rounded shadow-md w-[300px] my-2 rounded-lg shadow-white shadow-lg',
})
}
nuxtApp.provide('successToast', successToast)
})
Conclusion
Toast notifications in Nuxt 3 provide quick, effective feedback for users. With minimal setup, you can customize and trigger success, error, or warning messages across your app. This simple integration enhances user experience and keeps interactions smooth and informative.
See you in next article!
Top comments (0)