vuegems/vue-my-toasts

🍞 Provide your component and let us toast the rest

---

🍞 vue-my-toasts

A Vue toast plugin that finally lets you create your own toast component.

You can see a demo of the default behaviour here.

⚠This repository is being rewritten to be cross-compatible with Vue 2 & 3⚠

⚠Please stay tuned on Twitter for release date.⚠

❓ Why another toast plugin ?

Most toast plugins out here comes with a pre-defined style.

I love some of these plugins, but you can't assume that your design will be used in every projects.

This plugin aims to abstract what is boring in creating a toast notification plugin, and let you focus on designing your toast component while keeping a simple API to interact with.

🛠 Setup

Add it to your project with your favorite package manager.

npm install vue-my-toasts

yarn add vue-my-toasts

⚙ Configure

Inject the plugin to your Vue instance, and configure it using the parameters.

Do not forget to import the css file, it is needed to display the wrapper component properly.

import VueMyToasts from 'vue-my-toasts'
import 'vue-my-toasts/dist/vue-my-toasts.css'
import YourToastComponent from '~/components/toasts/YourToastComponent'

Vue.use(VueMyToasts, {
  component: YourToastComponent,
  options: {
    width: '400px',
    position: 'bottom-right',
    padding: '1rem',
  },
})

The whole principle of this package is to build your own toast component.

It comes with two included components, based on Tailwind and Bootstrap.

Both of those components are ready to be used straight from your app, or to be copy/pasted to create your own implementation.

If you want to see the included component, you can watch the demo here.

import VueMyToasts from 'vue-my-toasts'
// import BootstrapComponent from "vue-my-toasts/src/components/toasts/BootstrapComponent";
import TailwindComponent from 'vue-my-toasts/src/components/toasts/TailwindComponent'

Vue.use(VueMyToasts, {
  // component: BootstrapComponent,
  component: TailwindComponent,
  options: {
    width: '400px',
    position: 'bottom-right',
    padding: '1rem',
  },
})

Base parameters

• width: The max width for a toast (as CSS attribute)
• padding: The padding of the box handling the toasts list (as CSS attribute)
• position: The position of the toast list, can be: bottom-right, bottom-left, top-right, top-left, top-middle, bottom-middle

Note that you can add as many parameters you want, they will be passed as props to your toast component.

👨‍💻 Usage

vue-my-toasts come with a simple API that you can use from anywhere in your codebase.

As it is a Vue plugin, we inject our main functions and helpers in the Vue prototype under the key $toasts.

You can so access this from anywhere in your Vue components, and generally from anywhere you have access to your Vue instance.

export default {
  name: 'MyComponent',

  mounted() {
    // From helpers
    this.$toasts.success('This is my favorite toasts plugin.', {
      // Any other parameter...
    })

    // From base function
    this.$toasts.push({
      type: 'warning',
      message: 'This is definitely my favorite toasts plugin.',
      // Any other parameter...
    })
  },
}

API

• $toasts.base('message', options): Push a base message (options is facultative)
• $toasts.success('message', options): Push a success message (options is facultative)
• $toasts.warning('message', options): Push a warning message (options is facultative)
• $toasts.error('message', options): Push a error message (options is facultative)
• $toasts.push(options): Push a message from a raw toast payload
• $toasts.remove(id): Remove a toast from its unique id
• $toasts.updateConfig(newConfig): Update the toasts base config

Note that you can add as many parameters you want to options object, they will be passed as props to your toast component.

👨‍🎨 Create your own

If you want to create your own component, you can start from the Demo one.

You need to import the ToastMixin in your component, so you have a good start with the default configuration.

If you want to have a timer inside your component, you can import the TimerMixin.

Attributes

Attributes accessible by using the included mixins:

• Using ToastMixin:

• this.id: The ID of the toast, you can provide it yourself or it will be auto-generated.

• this.index: The index of the toast inside the currently visible list

• this.type: The type of the toast, can be: base, warning, error, success

• this.position: The position of the toast, can be: bottom-right, bottom-left, top-right, top-left, top-middle, bottom-middle

• this.message: The message of the toast.

• Using TimerMixin:

• this.duration: The duration for which the toast will be shown (in ms)

• this.percentageElapsed: The percentage elapsed of the toast duration

• this.remaining: The remaining time of the toast visible duration

Events

• $emit('remove'): Remove event, that will close the current current toast.

👋 Credits

Yaël GUILLOUX

Follow my work on yael.dev.

🔏 License

The MIT License (MIT). Please see License File for more information.

vue-my-toasts's Issues

Event "remove" is triggered at infinity

Hello,

Thanks for your plugin ! 👍

I'm using it on a VueJS Electron App. When a toast is removed, the event "remove" is still triggered.

Number of events is incrementing at infinity :

Events :

Is it the normal behavior ?

VueJS : v2
Electron : v9

Plugin creating another root instance

Hello.
I'm trying to test this plugin in a project, however, for some reason, the plugin is creating another Vue app instance (or that's what I think it's going on). An image speak more than a thousand words, there are two Root components:

This is part of my app.js code:


This is the index blade template page (I'm using Laravel as backend with Laravel-mix, that's why the following image is a blade template):

I'm not sure if that behavior is a bug or maybe I'm missing something.
Thank you!

Question about User component

hi,
I was checking the code and came across this section

https://github.com/Tahul/vue-my-toasts/blob/b464d291dec2d5b6a7972b05d44e8697223d8ae5/src/lib/injectComponent.js#L10-L11

Is there a specific reason for installing user component globally?

I think it's better to install it locally just for the Toast container to prevent any conflict in a large codebase

let me know what you think about this

[Vue 2] Container disappearing, animations not firing

Hi,

I'm currently using v1.1.1 in order to use it with VueJS 2.
The plugin seems to be working, as I can see it in the Vue inspector, moreover I can fire new notifications with this.$toasts

However, the #vue-my-toasts-root div created by it does not remain in the DOM, it appears whenever there are notifications to show, and completely disappears after they are all cleared.

The problem is that with this behavior, the fade animation is not firing, it just appears at the same time as the main container and disappears without transition.

If the container is still there though, animations run fine (for example if I already have a notification displayed, and I trigger a new one before this one disappears, in that case the new one gets the fade animation). But if I run a notification when the queue is empty, no animations on this one.

Here's how I initialised the plugin in the main.js file.

Any idea on how to fix this ? Many thanks

How to access $store / Vue i18n / ... in custom toast component?

Hello,

I've been using this plugin for a long time in fairly big Nuxt project. One long standing issue that I can't seem to get fixed has to do with #11

Here you explain creating a second root instance is intentional but one of the side effects of this is that it makes some important things unavailable in my custom toast component. These include Vue i18n, the store and some other plugins. How can I access these inside my custom component, preferably in a seamless way?

Thanks in advance,
-N

runtime error and vue3 compatibility question

Hi, I apologize if this has been brought up, but my first question is: Is your plugin vue3 compatible? If the answer is yes, I'm having some issues with the following runtime error: "vue-my-toasts.esm.js:90 Uncaught TypeError: vue__WEBPACK_IMPORTED_MODULE_0__.default is not a constructor"

The initial npm install was successful, and here is the code where I'm setting up the plugin in my main.js file (very straightforward setup). I would be grateful for any suggestions, thank you!

import { createApp } from "vue";
import Sample3 from "./Sample3.vue";

const app = createApp(Sample3);

import VueMyToasts from "vue-my-toasts";
import BootstrapComponent from "vue-my-toasts/src/components/toasts/BootstrapComponent";

app.use(VueMyToasts, {
component: BootstrapComponent,
options: {
width: '400px',
position: 'bottom-right',
padding: '1rem'
}
});

app.mount("#Sample3");

The duration in TimerMixin can't be set

The settings for duration does not works：

app.use(plugin, {
  component: TailwindComponent,
  options: {
    position: 'bottom-right',
    duration: 10000   // The bug is here
  },
})

Class based vue

Im using classes with Vue to take advantage of TypeScript and because component is typed as Object when it receives the class based component it is a Function this throws a warning(its just a warning so it still works fine).

[Vue warn]: Invalid prop: type check failed for prop "component". Expected Object, got Function

Would be nice to get Function added as an acceptable type.
Great library by the way!

It doesn't work with vue2

Hello

i tried to use your library with vue2. But it didn't work. There are two vue3 specific imports you use withDirectives and TransitionGroup. I tried to get it run but still failed even with replacing those two.