DEV Community

Elif Nur Turk
Elif Nur Turk

Posted on

Custom Toasters in Nuxt with Vue Toastification

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
      })
    })
Enter fullscreen mode Exit fullscreen mode

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

  1. Positioning

  2. Types and Styles

  3. 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)
    })
Enter fullscreen mode Exit fullscreen mode

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>

Enter fullscreen mode Exit fullscreen mode

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)

    })

Enter fullscreen mode Exit fullscreen mode

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!

References

Top comments (0)