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
awesome!