Programmatic Toasts for Nuxt.js Based On Tailwind CSS

programmatic-toasts

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') }

classToastclassTitleclassMessageclassCloseclassTimeout

  • 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.

Share