Programmatic toasts for Nuxt.js powered by Tailwind CSS
MIT License
This requires Nuxt.js with the Tailwind CSS module
nuxt-tailvue
dependency to your Nuxt.js projectnpm install nuxt-tailvue
# OR
yarn add nuxt-tailvue
nuxt-tailvue
to the modules
section of nuxt.config.js
{
modules: [
['nuxt-tailvue', {toast: true}],
]
}
tailwind.config.js
module.exports = {
...
purge: {
...
content: [
'node_modules/tv-*/dist/tv-*.umd.min.js',
],
},
}
this.$toast.show('Keeping it simple')
this.$toast.show({
type: 'success',
title: 'Success',
message: 'This is a successful toast',
})
this.$toast.show({
type: 'danger',
title: 'Error',
message: 'Please specify an e-mail address',
})
this.$toast.show({
message: 'Single action toast',
primary: { label: 'UNDO', action: () => alert('primary') },
timeout: false,
})
this.$toast.show({
title: 'Toast with actions',
message: 'This toast has multiple actions',
primary: { label: 'Primary', action: () => alert('primary') },
secondary: { label: 'Secondary', action: () => alert('secondary') },
timeout: false,
})
this.$toast.show({
title: 'custom colors',
message: 'these are custom colors',
classToast: 'bg-teal-600',
classTitle: 'text-teal-100',
classMessage: 'text-teal-200',
classClose: 'text-teal-300',
classTimeout: 'bg-teal-800',
})
title
false
message
Please specify a message
type
timeout
2
progress
true
primary
{ label: 'UNDO', action: () => alert('primary') }
secondary
{ label: 'UNDO', action: () => alert('secondary') }
classToast
, classTitle
, classMessage
, classClose
, classTimeout
classPrimary
classSecondary
classSingle
const containerClasses = [
'z-40', 'fixed', 'inset-0', 'flex', 'flex-col-reverse', 'items-end', 'justify-center',
'px-4', 'py-6', 'pointer-events-none', 'sm:p-6', 'sm:items-end', 'sm:justify-end'
]
{
modules: [
[ 'nuxt-tailvue', { all: true, toast: { defaults: { containerClasses: [ 'mt-12' ] } } } ],
]
}
This will move toasts lower
You can also set default values for all props passed to the tv-toast component using:
{
modules: [
[ 'nuxt-tailvue',
{
all: true,
toast: {
defaultProps: {
timeout: 10,
progress: false,
classToast: 'bg-red-600'
}
}
}
],
]
}