# vue-lite-toast

> Vue3 toaster notification

Latest version **0.1.3** (published 2021-04-07) · MIT license · 0 weekly downloads

## Install

```sh
npm install vue-lite-toast
pnpm add vue-lite-toast
yarn add vue-lite-toast
bun add vue-lite-toast
```

## Health

**Score 15/100 (F)** — status: abandoned.

Positive: no vulnerabilities.

Warnings: low downloads; no types; no esm support; pre 1.0.

Negative: abandoned; low maintenance score.

## Facts

| | |
|---|---|
| Version | 0.1.3 |
| Published | 2021-04-07 |
| First published | 2021-02-24 |
| Weekly downloads | 0 |
| License | MIT |
| TypeScript types | none |
| Module format | CommonJS |
| Dependencies | 1 |
| Unpacked size | 6.7 KB |
| Known vulnerabilities | 0 |
| Install scripts | no |
| Author | @web677 |
| Maintainers | fanli-fe |
| Keywords | vue-lite-toast, lite-toast, toast, toaster, toastr, vue, vue3 |

## Links

- npm: https://www.npmjs.com/package/vue-lite-toast
- npm.io page: https://npm.io/package/vue-lite-toast

## Dependencies (1)

- [vue](https://npm.io/package/vue.md) ^3.0.0

## 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

- 0.1.3 (latest) — 2021-04-07
- 0.1.2 — 2021-04-03
- 0.1.1 — 2021-02-24
- 0.1.0 — 2021-02-24

## README

# vue-lite-toast

Vue.js toast notification plugin for vue 3

## Installation

```bash
# npm
npm install vue-lite-toast
```

## Import

```js
// In you main.js
// ... considering that your app creation is here
import Toast from "@vue-lite-toast";

createApp(App).use(Toast).mount("#app");
```

## Usage

```js
// this.$toast.open(message, {/* options */});
this.$toast.open(`Hello world`);
this.$toast.success(`Hello world`);
this.$toast.error(`Hello world`);
this.$toast.warning(`Hello world`);
this.$toast.info(`Hello world`);
```

## Available options

The API methods accepts these options:

| Attribute |   Type   | Default | Description                                        |
| :-------- | :------: | :-----: | :------------------------------------------------- |
| message   |  String  |   --    | Message text/html (required)                       |
| type      |  String  | `info`  | One of `success`, `info`, `warning`, `error`       |
| duration  |  Number  | `2500`  | Visibility duration in milliseconds                |
| onClose   | Function |   --    | Do something after toast gets dismissed            |
| lock      | Boolean  | `false`  | Prevent users from manipulating pages during toast |

## API methods

### `open(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.open("Hello!");

// Can accept an Object of options.
// If yout don't pass options, the default toast will be showed

this.$toast.open("Something went wrong!", {
  type: "error",
  // all of other options may go here
});

this.$toast.open("Something stay longer!", {
  duration: 4000,
  // all of other options may go here
});
```

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

There are some proxy methods to make it more readable. The same rule for `error`, `info` and `warning` methods

```js
this.$toast.success("Congratulations on your success", {
  // optional options Object
});
```

## License

[MIT](LICENSE.txt) License

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