Programmatic Toast is a Vue.js toast notification component of the Nuxt.js framework, based on Tailwind CSS.

vue toast component, vue toasted example, bootstrap 4 toast notification, vue toast notification, vue 3 toast notification

How to make use of it:

Install and download:

# Yarn
$ yarn add nuxt-tailvue

# NPM
$ npm i nuxt-tailvue --save

1. Add the nuxt-tailvue module to nuxt.config.js.

{
  modules: [
    ['nuxt-tailvue', {toast: true}],
  ]
}

2. Create toast notifications as follows:

this.$toast.show({
  type: 'success',
  title: 'Toast Title',
  message: 'Toast Message'
})

3. All possible props.

title: {
  type: [Boolean, String],
  required: false,
  default: false,
},
message: {
  type: String,
  required: false,
  default: 'Please specify a <b>message</b>',
},
type: {
  type: String,
  required: false,
  validate: (type) => { return ['success', 'info', 'danger', 'warning'].includes(type) },
  default: '',
},
icon: {
  type: [Boolean, String],
  required: false,
  default: false,
},
iconPrimary: {
  type: String,
  required: false,
  default: '',
},
iconSecondary: {
  type: String,
  required: false,
  default: '',
},
timeout: {
  type: [Boolean, Number],
  required: false,
  default: 2,
},
primary: {
  type: [Boolean, Object],
  required: false,
  default: false,
},
secondary: {
  type: [Boolean, Object],
  required: false,
  default: false,
},
classToast: {
  type: String,
  required: false,
  default: 'bg-white',
},
classTitle: {
  type: String,
  required: false,
  default: 'text-gray-900',
},
classMessage: {
  type: String,
  required: false,
  default: 'text-gray-500',
},
classClose: {
  type: String,
  required: false,
  default: 'text-gray-400',
},
classTimeout: {
  type: String,
  required: false,
  default: 'bg-gray-200',
},
defaults: {
  type: Object,
  required: false,
  default: () => ({}),
},

Options

title

• Optional, Default: false

message

• Required, Default: Please specify a message

type

• Optional, Default: false
• Acceptable: success, info, danger, warning

timeout

• Allow the toast to timeout in second(s)
• Displays a timeout progress bar
• Optional, Default: 2

progress

• Optional, Default: true
• Control if the progress line appears

primary

• Provide a label and callback for a primary button
• Optional, Object,
• ex: { label: 'UNDO', action: () => alert('primary') }

secondary

• Provide a label and callback for a secondary button
• Optional, Object,
• ex: { label: 'UNDO', action: () => alert('secondary') }

classToast, classTitle, classMessage, classClose, classTimeout

• Optional, defaulting to white and grays
• Specify any tailwind classes you’d like to combine

classPrimary

• Optional, override the primary button for multiple action toasts
• default: ‘text-indigo-600 hover:text-indigo-500 focus:shadow-outline-blue focus:border-blue-300 active:text-indigo-700 active:bg-gray-50’

classSecondary

• Optional, override the secondary button for multiple action toasts
• default: ‘text-gray-700 hover:text-gray-500 focus:shadow-outline-blue focus:border-blue-300 active:text-gray-800 active:bg-gray-50’,

classSingle

• Optional, override the single button classes
• default: ‘text-indigo-600 hover:text-indigo-500’,

Programmatic Toast Component For Nuxt.js Plugin/Github

See Demo And Download

Official Website(acidjazz): Click Here

This superior jQuery/javascript plugin is developed by acidjazz. For extra Advanced usage, please go to the official website.