Vue3 toast

This plugins is compatible and build with tailwindcss2 et fontawesome (exept for custom notification cell)

Add it to your project

Install it with yarn or NPM

yarn add @kugatsu/vue3-toast

How to use

Install the plugin into

// main.js

import VueNotification from "@kugatsu/vue3-toast";

createApp(App)
  .use(VueNotification, { duration: 5000, [...] })

Add the container at the bottom of your App

// App.vue

<template>
  <div>
    <router-view />
    <VueNotificationContainer />
  </div>
</template>

Throw toast

// param1: notification
// param2: custom timeout
this.$toast.new({
  title: "Password",
  icon: "key",
  content: "Email send",
}, 10000);

this.$toast.success({
  title: "Password",
  icon: "key",
  content: "Email send",
});

this.$toast.error({
  title: "Password",
  icon: "key",
  content: "Email send",
});

this.$toast.warning({
  title: "Password",
  icon: "key",
  content: "Email send",
});

Composition api

import useToast from "@kugatsu/vue3-toast/useToast";

[...]

setup(){
    const toast = useToast();

    toast.new({
        title: "Acquittement Réparateur",
        content: "L'intervention a été acquitté",
        icon: "check-circle"
    });
}

Configuration

This is the default configuration of the toast. You can overide some property during the installation.

let conf = {
  duration: 5000,
  position: "top-right",
  fullSize: false,
  fullSizeMobile: true,
  colors: {
    new: "bg-blue-500",
    success: "bg-green-500",
    warning: "bg-yellow-500",
    error: "bg-red-500",
  },
};

createApp(App).use(VueNotification, { conf });

Customization

If you want replace the layout of the notification you can pass as props cellComponent a vue3 component with "notification" props.

You can do the same things to replace animation groups with the props transitionComponent

Sample:

<template>
  <div>
    <router-view />
    <VueNotificationContainer :cellComponent="YourCustomCell" :transitionComponent="YourTransition"/>
  </div>
</template>