https://github.com/kazemmdev/vue-toast
This is a simple vue pluign toast notifier with tailwind
https://github.com/kazemmdev/vue-toast
notifications tailwindcss toast vue vue3
Last synced: about 1 year ago
JSON representation
This is a simple vue pluign toast notifier with tailwind
- Host: GitHub
- URL: https://github.com/kazemmdev/vue-toast
- Owner: kazemmdev
- License: mit
- Created: 2022-06-10T06:43:54.000Z (about 4 years ago)
- Default Branch: master
- Last Pushed: 2022-06-10T07:40:28.000Z (about 4 years ago)
- Last Synced: 2025-04-12T12:08:38.969Z (about 1 year ago)
- Topics: notifications, tailwindcss, toast, vue, vue3
- Language: JavaScript
- Homepage:
- Size: 143 KB
- Stars: 9
- Watchers: 1
- Forks: 1
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE.md
- Security: .github/SECURITY.md
Awesome Lists containing this project
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 ⭐️