Vuejs Toast

Global Options

Overwrite default options within Application

this.$toastr could be this.$refs.toastr. It is depends on how you use it.

Change Default Plugin Timeout

this.$toastr.defaultTimeout = 3000; // default timeout : 5000

Change Default Plugin ProgressBar

this.$toastr.defaultProgressBar = false; // default active : true

Change Default Plugin ProgressBar Manual Value

this.$toastr.defaultProgressBarValue = 0; // default value : null (managed by JS timer)

Change Default Plugin Type

this.$toastr.defaultType = "error"; // default type : success

Change Default Plugin Position

this.$toastr.defaultPosition = "toast-bottom-left"; // default position: toast-top-right

Change Default Plugin Close On Mouse Hover

this.$toastr.defaultCloseOnHover = false; // default close on hover: true

Change Default Style

this.$toastr.defaultStyle = { "background-color": "red" }; // default style: { }

Inject your class names to toast

this.$toastr.defaultClassNames = ["animated", "zoomInUp"]; // default classNames: []

Overwrite default options via plugin options

You can also overwrite defaults by passing options object during plugin registration

Vue.use(VueToastr, {
  defaultTimeout: 3000,
  defaultProgressBar: false,
  defaultProgressBarValue: 0,
  defaultType: "error",
  defaultPosition: "toast-bottom-left",
  defaultCloseOnHover: false,
  defaultStyle: { "background-color": "red" },
  defaultClassNames: ["animated", "zoomInUp"]
});

← Toast Options →