# tw-vue-notifications > programmatic toasts for NuxtJS powered by TailwindCSS Latest version **1.0.13** (published 2022-09-10) · MIT license · 0 weekly downloads ## Install ```sh npm install tw-vue-notifications pnpm add tw-vue-notifications yarn add tw-vue-notifications bun add tw-vue-notifications ``` ## Health **Score 15/100 (F)** — status: abandoned. Positive: no vulnerabilities. Warnings: low downloads; no types; no esm support. Negative: abandoned; low maintenance score. ## Facts | | | |---|---| | Version | 1.0.13 | | Published | 2022-09-10 | | First published | 2022-09-09 | | Weekly downloads | 0 | | License | MIT | | TypeScript types | none | | Module format | CommonJS | | Dependencies | 1 | | Unpacked size | 176.4 KB | | Known vulnerabilities | 0 | | Install scripts | no | | Author | kevin olson | | Maintainers | kiuve | | Keywords | vue, vuejs, tailwindcss, toast | ## Links - npm: https://www.npmjs.com/package/tw-vue-notifications - Repository: https://github.com/kiuve/tailwind-toast-vue - Homepage: https://github.com/kiuve/tailwind-toast-vue#readme - Issues: https://github.com/kiuve/tailwind-toast-vue/issues - npm.io page: https://npm.io/package/tw-vue-notifications ## Dependencies (1) - [tv-icon](https://npm.io/package/tv-icon.md) ^1.0.1 ## Alternatives - [update-check](https://npm.io/package/update-check.md) — 4.0M weekly downloads - [react-native-onesignal](https://npm.io/package/react-native-onesignal.md) — 134.5K weekly downloads - [react-redux-toastr](https://npm.io/package/react-redux-toastr.md) — 33.7K weekly downloads - [@nocobase/plugin-notification-manager](https://npm.io/package/@nocobase/plugin-notification-manager.md) — 2.0K weekly downloads - [react-simple-toasts](https://npm.io/package/react-simple-toasts.md) — 1.9K weekly downloads ## Recent versions - 1.0.13 (latest) — 2022-09-10 - 1.0.12 — 2022-09-10 - 1.0.11 — 2022-09-10 - 1.0.10 — 2022-09-10 - 1.0.9 — 2022-09-10 - 1.0.8 — 2022-09-09 - 1.0.7 — 2022-09-09 - 1.0.6 — 2022-09-09 - 1.0.5 — 2022-09-09 - 1.0.4 — 2022-09-09 - 1.0.3 — 2022-09-09 - 1.0.2 — 2022-09-09 ## README

[![](https://img.shields.io/npm/v/tv-toast.svg?logo=npm&style=flat-square)](https://www.npmjs.com/package/tv-toast) [![](https://img.shields.io/badge/nuxt.js-module-04C690.svg?style=flat-square)](https://nuxtjs.org) ![Test Javascript](https://github.com/acidjazz/tv-toast/workflows/Test%20Javascript/badge.svg) [![](https://img.shields.io/npm/dt/tv-toast.svg?style=flat-square)](https://www.npmjs.com/package/tv-toast) [![](https://img.shields.io/github/license/acidjazz/tv-toast?style=flat-square)](https://www.npmjs.com/package-tv-toast) > This requires [Nuxt.js](https://nuxtjs.org) with the [Tailwind CSS](https://tailwindcss.nuxtjs.org) module ## Quick Setup 1. Add the `nuxt-tailvue` dependency to your Nuxt.js project ```bash npm install nuxt-tailvue # OR yarn add nuxt-tailvue ``` 2. Add `nuxt-tailvue` to the `modules` section of `nuxt.config.js` ```js { modules: [ ['nuxt-tailvue', {toast: true}], ] } ``` 3. If you're using [Purge](https://tailwindcss.com/docs/controlling-file-size), add this module to the content section of `tailwind.config.js` ```js module.exports = { ... purge: { ... content: [ 'node_modules/tv-*/dist/tv-*.umd.min.js', ], }, } ``` ## Usage ```js this.$toast.show('Keeping it simple') ``` ![](media/simple.gif?raw=true) ```js this.$toast.show({ type: 'success', title: 'Success', message: 'This is a successful toast', }) ``` ![](media/success.gif?raw=true) ```js this.$toast.show({ type: 'danger', title: 'Error', message: 'Please specify an e-mail address', }) ``` ![](media/error.gif?raw=true) ```js this.$toast.show({ message: 'Single action toast', primary: { label: 'UNDO', action: () => alert('primary') }, timeout: false, }) ``` ![](media/action.gif?raw=true) ```js 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, }) ``` ![](media/actions.gif?raw=true) ```js 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', }) ``` ![](media/custom.gif?raw=true) ## 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', ## Defaults ### Toast Container * Default toast container classes are as follows ```js 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' ] ``` * You maybe add your own classes to alter the position ```js { modules: [ [ 'nuxt-tailvue', { all: true, toast: { defaults: { containerClasses: [ 'mt-12' ] } } } ], ] } ``` > This will move toasts lower ### Defaults for Props You can also set default values for all props passed to the tv-toast component using: ```js { modules: [ [ 'nuxt-tailvue', { all: true, toast: { defaultProps: { timeout: 10, progress: false, classToast: 'bg-red-600' } } } ], ] } ``` --- _Source: https://npm.io/package/tw-vue-notifications · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._