Toastr

Toastr is a Javascript library for non-blocking notifications. View full documentation here.

Basic example

All the toast methods return a toastId except dismiss and isActive. The toastId can be used to avoid duplicate toast alerts and remove a toast programmatically or to check if the toast is displayed. You can see all the toast props here

							
                                
<template>
    <div>
        <BButton variant="primary" @click="defaultToast">Default Message</BButton>
        <BButton variant="info" @click="infoToast">Info Message</BButton>
        <BButton variant="warning" @click="warningToast">Warning Message</BButton>
        <BButton variant="success" @click="successToast">Success Message</BButton>
        <BButton variant="danger" @click="errorToast">Error Message</BButton>
    </div>
</template>

<script lang="jsx" setup>
//Default Toast
const defaultToast = () => {
  useNuxtApp().$toast("🦄 This is a default toast message", { hideProgressBar: true });
};

//Info Toast
const infoToast = () => {
  useNuxtApp().$toast.info("John! Recently joined twitter.", {
    toastId: "toast1",
    // you can see all details about custom icon here: https://vue3-toastify.js-bridge.com/usage/icons.html
    icon: () => <ComponentIcon class="ti-twitter-alt" />, 
    hideProgressBar: true,
    position: "top-left",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};

//Warning Toast
const warningToast = () => {
  useNuxtApp().$toast.warning("This is a warning toast", {
    toastId: "toast2",
    hideProgressBar: true,
    position: "top-right",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};

//Success Toast
const successToast = () => {
  useNuxtApp().$toast.success("Test Complete Successfully", {
    toastId: "toast3",
    hideProgressBar: true,
    position: "bottom-left",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};

//Error Toast
const errorToast = () => {
  useNuxtApp().$toast.error("Please try again later!", {
    toastId: "toast4",
    hideProgressBar: true,
    position: "bottom-right",
    theme: "light",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
</script>

Inverse Toast Alerts

Use theme:"colored" option for colored or inverse toast alert.

							
                                
<template>
    <div>
        <BButton variant="primary" @click="defaultToast">Default Message</BButton>
        <BButton variant="info" @click="infoToast">Info Message</BButton>
        <BButton variant="warning" @click="warningToast">Warning Message</BButton>
        <BButton variant="success" @click="successToast">Success Message</BButton>
        <BButton variant="danger" @click="errorToast">Error Message</BButton>
    </div>
</template>

<script lang="jsx" setup>
//Default Toast
const defaultToast = () => {
  useNuxtApp().$toast("🦄 This is a default toast message", {
    hideProgressBar: true,
    theme: "colored",
  });
};

//Info Toast
const infoToast = () => {
  useNuxtApp().$toast.info("John! Recently joined twitter.", {
   // you can see all details about custom icon here: https://vue3-toastify.js-bridge.com/usage/icons.html
    icon: () => <ComponentIcon class="ti-twitter-alt" />,
    hideProgressBar: true,
    position: "top-left",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};

//Warning Toast
const warningToast = () => {
  useNuxtApp().$toast.warning("This is a warning toast", {
    hideProgressBar: true,
    position: "top-right",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};

//Success Toast
const successToast = () => {
  useNuxtApp().$toast.success("Test Complete Successfully", {
    hideProgressBar: true,
    position: "bottom-left",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};

//Error Toast
const errorToast = () => {
  useNuxtApp().$toast.error("Please try again later!", {
    hideProgressBar: true,
    position: "bottom-right",
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
  });
};
</script>

Toastr Alerts positions

You can set position option like (position: 'top-right') for different toast alert positions.

							
                                
<template>
    <BButton variant="secondary" @click="toastPositions('top-left')" >Top left</BButton>
    <BButton variant="secondary" @click="toastPositions('top-right')" >Top right</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-left')" >Bottom left</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-right')" >Bottom right</BButton>
    <BButton variant="secondary" @click="toastPositions('top-center')" >Top center</BButton>
    <BButton variant="secondary" @click="toastPositions('bottom-center')" >Bottom center</BButton>
</template>

<script lang="jsx" setup>

const toastPositions = (position) => {
  const variants = ["info", "success", "warning", "error", "default"];
  const rndmitem = Math.floor(Math.random() * variants.length);
  const types = variants[rndmitem];

  useNuxtApp().$toast(`This is a toast message on ${position}`, {
    type: types,
    icon: () => <ComponentIcon class="fa fa-gear fa-spin" style={{ fontSize: '24px' }} />,
    position: position,
    hideProgressBar: true,
    theme: "colored",
    autoClose: 5000,
    hideProgressBar: true,
    pauseOnHover: false,
  });
};
</script>

Basic example
Inverse Toast
Position