Programmatic Toast Component For Nuxt.js Based On Tailwind CSS – nuxt-tailvue

Description:

A Vue.js toast notification component for Nuxt.js framework, based on Tailwind CSS.

Basic usage:

1. Add the nuxt-tailvue module to the 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: () => ({}),
},

Preview:

Changelog:

v1.2.29 (04/17/2021)

• Button class customization

v1.2.28 (02/08/2021)

• major improvements to actionable toasts

v1.2.20 (02/07/2021)

• added $denied

v1.2.18 (11/30/2020)

• default props support

v1.2.15 (10/26/2020)

• smoother progress bar transition

Download Details:

Author: acidjazz

Live Demo: https://github.com/acidjazz/tv-toast

Download Link: https://github.com/acidjazz/tv-toast/archive/master.zip

Official Website: https://github.com/acidjazz/tv-toast

Install & Download:

# Yarn
$ yarn add nuxt-tailvue

# NPM
$ npm i nuxt-tailvue --save

You Might Be Interested In: