# @k90mirzaei/vue-toast

> Vue toast notification with tailwindcss

Latest version **1.0.3** (published 2022-06-10) · MIT license · 0 weekly downloads

## Install

```sh
npm install @k90mirzaei/vue-toast
pnpm add @k90mirzaei/vue-toast
yarn add @k90mirzaei/vue-toast
bun add @k90mirzaei/vue-toast
```

## 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.3 |
| Published | 2022-06-10 |
| First published | 2022-06-10 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 0 |
| Unpacked size | 42.6 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| GitHub stars | 8 |
| Author | Kazem Mirzaei |
| Maintainers | k90mirzaei |
| Keywords | vue, vue3, vuejs, tailwindcss, tailwindui, notifications, toast |

## Links

- npm: https://www.npmjs.com/package/@k90mirzaei/vue-toast
- Repository: https://github.com/k90mirzaei/vue-toast
- Homepage: https://github.com/k90mirzaei/vue-toast#readme
- Issues: https://github.com/k90mirzaei/vue-toast/issues
- npm.io page: https://npm.io/package/@k90mirzaei/vue-toast

## 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.3 (latest) — 2022-06-10
- 1.0.2 — 2022-06-10
- 1.0.1 — 2022-06-10

## README

# Vue Toast with Tailwindcss

This is a simple vue pluign toast notifier with tailwind

## Installation

```bash
npm i @k90mirzaei/vue-toast
yarn add @k90mirzaei/vue-toast
```


## Import

```js
import { createApp } from 'vue'
import App from './App.vue'

import toast from 'vue-toast'
import 'vue-toast/dist/index.css'

createApp(App).use(toast).mount('#app')

```

## Usage

```js
this.$toast.show(`Hey! I'm here`);
this.$toast.success(`Hey! I'm here`);
this.$toast.error(`Hey! I'm here`);
this.$toast.warning(`Hey! I'm here`);
this.$toast.info(`Hey! I'm here`);

// Close all opened
this.$toast.clear();
```

## Available options

The API methods accepts these options:

| Attribute     |      Type       |    Default     | Description                                                                   |
| :------------ | :-------------: | :------------: | :---------------------------------------------------------------------------- |
| message       |     String      |       --       | Message text/html (required)                                                  |
| type          |     String      |   `default`    | One of `success`, `info`, `warning`, `error`, `default`                       |
| duration      |      Number     |     `4000`     | Visibility duration in milliseconds or `false` that disables duration         |
| queue         |     Boolean     |    `false`     | Wait for existing to close before showing new                                 |
| maxToasts     | Number or false |      `5`       | Defines the max of toasts showed in simultaneous                              |


## API methods

### `show(message, ?options)`

This is generic method, you can use this method to make any kind of toast.

```js
// Can accept a message as string and apply rest of options from defaults
this.$toast.show("Howdy!");

// Can accept an Object of options.
// If yout don't pass options, the default toast will be showed
this.$toast.show("Something went wrong!", {
  type: "error",
  // all of other options may go here
});
```

## Contributing

Please see [CONTRIBUTING](.github/CONTRIBUTING.md) for details.

## Security Vulnerabilities

Please review [our security policy](../../security/policy) on how to report security vulnerabilities.

## Credits

-   [k90mirzaei](https://github.com/k90mirzaei)
-   [All Contributors](../../contributors)

## License

The MIT License (MIT). Please see [License File](LICENSE.md) for more information.

## Support

This project needs a ⭐️ from you. Don't forget to leave a star ⭐️

---
_Source: https://npm.io/package/@k90mirzaei/vue-toast · Machine-readable twin of the npm.io package page. Health data is recomputed on every publish._