Toast

RToast component is used to show quick messages that temporarily appear in the top right zone of the screen.

Usage

Revel provides createRToastManager to create a toast manager instance to open toasts from your components like this:

const toast = createRToastManager(...);
toast.positive('Something positive in your code');

Options API

Our legacy Vue 2 projects are using this.$toast so, in order to keep backwards compatibility, Revel automatically registers a toast manager instance on installation:

  app.config.globalProperties.$toast = createRToastManager(app);

This means that old this.$toast will keep on working after migrating to the new Revel.

Composition API

Instead of using the previous Vue.prototype scape hatch, in composition API, you can simply create a singleton toast instance that you import from setup method (check this implementation in the last example). You could also use provide/inject but, it is more verbose and probably less clear.

Examples

Options API

You can also create custom dynamic html messages by passing a render function in the message prop.

Composition API

This example import a toast instance singleton from composition API.